常见移动web适配方案一般有3种方法，如下图：
①：定高，宽度百分比（百分比适配简单，一般用来做一些适配性不高的页面，比如只有一些文字和图片等简单的屏幕适配）
②：flex （更多的用于复杂页面的布局。具体参照阮一峰大神写的-Flex 布局教程：语法篇和实例篇
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool （语法篇）
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html （实例篇）
③：媒体查询（css3 media媒体查询器用法总结：
注：flex和媒体查询这2种方案可以实现移动端的日常响应式开发。但不推荐媒体查询，因为针对不同屏幕的不同页面都要去单独写样式，很麻烦，而且低效。
Rem:
以下是我在学习rem的过程当中看过的几篇写得比较好的文章，内容容易理解，也比较全面，适合入门。看完以后，对rem就了解得差不多了，所以我就不再赘述了。
http://www.w3cplus.com/css3/define-font-size-with-css3-rem CSS3的REM设置字体大小
https://www.jianshu.com/p/b00cd3506782 手机端页面自适应解决方案—rem布局基础篇
https://www.jianshu.com/p/985d26b40199 手机端页面自适应解决方案—rem布局进阶版（附源码示例）
最近跟着某视频学rem，然后写了个简单的demo。用JS动态修改根元素的字体大小，跟上面链接里引用的JS不同，个人感觉更简单，容易理解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>动态修改font-size方法-rem</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
font-size: 16px;
}
.box {
width: 10rem;
height: 10rem;
background-color: black;
}
.text {
color: #fff;
}
</style>
</head>
<body>
<div class="box">
<p class="text">hello rem</p>
</div>
<script type="text/javascript">
// 获取视窗可视宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
console.log(htmlWidth);
// 获取视窗可视高度
let htmlDom = document.getElementsByTagName(‘html‘)[0];
console.log(htmlDom);
// 这里除以10方便计算，不要除以太离谱的数值，比如200，浏览器无法识别这么小的值
// 这里htmlDom计算出的值，相当于给html设置font-size
htmlDom.style.fontSize = htmlWidth / 10 + ‘px‘;
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/tu-0718/p/9146631.html