网页如何自适应各种屏幕，以及主流浏览器的兼容？

Question

网页如何自适应各种屏幕，以及主流浏览器的兼容？
1.将屏幕缩小之后不会变形；
2.宽，高也可以自适应，在不设置宽高的前提下；

3.不能再最小化时变成像下图这样;

求解，谢谢!

Answer 1

要达到完全一致的情况是很难的，div的宽高还好讲，但像字体这种，大小是有限制的，最小为12px。所以你有时候很难完美兼容各种设备。抛去这一点你可以通过media查询来做响应式开发，或者百分比做自适应布局，如果只考虑移动设备还有flex和rem这种自适应，看你的项目需求选择最合理的方案才是最好的

Answer 2

@media only screen and (max-width:900px){
    /*css code*/
}

Answer 3

我刚写的文章，希望对你有用移动端网页怎么做？

Answer 4

媒体流查询欢迎你，可以参考响应式网站的实现原理

Answer 5

移动端的话可以去了解淘宝/网易的scale+rem方案，pc端估计要配合@media，不过pc端的适配一般也就是模块直接的位置调换，不会有太大的适应变化

Answer 6

你可以试一下flex，看能不能解决

Answer 7

百分比不行吗