在前端开发中，一般使用淘宝的flexible。其原理是使用js动态计算html的font-size，利用rem来实现不同宽度的适配。但也有它的一些缺点，比如性能损耗，由于js的阻塞加载和动态计算，页面不免会出现卡顿和闪屏的现象，影响用户体验。现在我们不妨看看CSS如何实现移动端屏幕适配！
方案一：使用meta标签
在html的head中插入下面的meta标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=375, user-scalable=no">没错，是两个viewport标签。width=device-width写在上面，width=375写在下面，375就是以哪个设备宽度为基准，现在大部分设计稿都是以iphone6的375宽度为基准做2倍图。加了上面两个mata标签，后面的css就可以完全使用px为单位直接使用，整个页面会自动按设备宽度进行等比例缩放。
方案二：使用css的calc计算属性
在css中定义html的font-size为：calc(100vw/3.75)，calc、vw能兼容ios8+和android4.4+，可放心使用，如下：
html {
font-size: calc(100vw/3.75);
-webkit-text-size-adjust: 100%;
}然后在css中，就可以将所有的px单位除以100，得到rem单位了。比如：
.row>div {
float: left;
width: .82rem;
height: .82rem;
text-align: center;
line-height: .82rem;
margin-left: .05rem;
background-color: #f0f0f0;
}上面的rem单位转换，建议大家可以使用px2rem这个插件完成，webpack、vscode都能支持。设置时将rootFontSize 设为100即可。
在vscode中，可以使用ctrl+shift+p,选择px2rem就可以将当前页面的px全部转换为rem。
当然，rem和px可以相互共存，比如我标题栏就想要44px高，这样就不会缩放了。
总结：两种方案如何选择
方案一，直接使用html的mata实现整个页面的缩放，比较适合那些宣传单页或全屏游戏交互类，无法实现px与rem共存的情况。
方案二，利用了rem来缩放，可实现与px共存，在借助px2rem的情况下，能高效方便的实现适配。
转自：https://www.toutiao.com/i6773562707711885832
