标签：学习 fonts 语法 不同 移动 har dia 图片 viewport
常见移动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媒体查询器用法总结：http://www.bubuko.com/infodetail-268180.html）
注：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>
标签：学习 fonts 语法 不同 移动 har dia 图片 viewport
原文地址：https://www.cnblogs.com/tu-0718/p/9146631.html
