写在前面 前端开发最让人头疼的莫过于兼容性问题，继上一篇 前端兼容性问题 - CSS、JS 兼容 之后，这一篇主要研究并解决屏幕尺寸的兼容性问题 目录： 当前现状 解决方案 模拟设备测试方案 当前现状

简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。 在静态网页中，我们经常用像素（px）作为单位，来描述一个元素的宽…

最近在工作中做了一些响应式布局的功能和可视化大屏的开发，所以这里我也整理一下用到的响应式布局方案作为未来项目开发的参考方案 常用实现方案 flex 布局 flex 布局一把梭能解决绝大多情况下的响应式

在此之前为解决适配问题“普遍”会给html根节点设置font-size作为根字体计算单位值，适兼容多端配问题。开发者需要实时换算单位、还需要精确到六七位小数点。这样的解决方案在现在看来似乎不是最简洁高

不懂原理的同学们也没关系，下面跟着操作就可以实现。 这个px不转rem是依赖注释的，可是生产环境打包的时候就会把注释去掉，这样导致你写了 /*no*/不转这条css属性，也没效果，打包删除了注释，它就会自动帮你转了。 解决方法一. 可以把样式写到index.html文件的sty…