frontend/css/rem/banner
前台开发中，手机端的开发可以说是举足轻重了，可是又面临着不同设施尺寸和分辨率的尴尬点。今天[2018-09-16]台风山竹登陆广东，来势汹汹，外出是不可能的了，那就宅着写写这篇小文章吧…原文请戳这里-谈谈rem单位
超长的前奏
说到手机端的响应布局，你也许会想到：
1. 使用CSS3媒体查询的方法
body { background: yellow;}@media screen and (max-width: 400px) { body { background: red; }}
frontend/css/rem/media_demo
嗯，这种的样式的工作量超级大，由于要对图片和文字等资源针对不同的尺寸进行设置。一种凉凉的感觉从心底飘过～～～
2. 直接使用百分比
这种方法比较适合手机端上，页面图片铺满宽度屏幕的经营推广活动的情况。由于在设计的时候会有一个750px的宽等等设计规范，能够很好的适配到不同手机啦。而后工作就是切图了…
#percent{ width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;}#percent .item{ flex: 1;}#percent .item img{ display: block; width: 100%; height: auto;}
frontend/css/rem/percent_demo
这种切图比较费力，假如认真看上面的gif图的话会发现是三张同等宽高的图片，在chrome上的调试器上看是有白条的，不过不影响。由于在真机上是不存在的。假如不是切图宽度等分的情况下，那就不建议这种百分比的适配方法了。
3. 固定宽度
这种方法比较适合PC端开发，在手机端是必需不能才去的。由于手机端的宽度足够，能够带来足够好的体验，并且最重要的一点是其像素比是1啊。在缩放的时候不会带来内容变形的体验。假如到手机端上面，那就呵呵了～
#container{ width: 680px; background: yellow; margin: 0 auto;}h1{ text-align: center;}
frontend/css/rem/fixed_width_demo
4. 使用viewport
移动设施上的viewport是设施屏幕上用来显示网页的那部分区域，再具体一点就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域大，也可能比浏览器的可视区域小。
这得要在网页的head标签上面设置meta，比方：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">嗯，这个知识点还是一丢丢的，详细的内容参考菜鸟教程：响应式 Web 设计 – Viewport。 本博文的重点不是这个～
是的，我们可以使用REM来进行适配啊：可以说是目前最强的手机端适配方案…
frontend/talk-about-gobang-game/qiaoba
rem是什么
rem和em单位一样，都是一个相对单位，不同的是em是相对于父元素的font-size进行计算，rem是相对于根元素html的font-size进行计算的，这样一来rem就完美的绕开了复杂的层级关系，实现了相似em单位的功能。默认情况下，浏览器给的字体大小是16px，按照转化关系16px = 1rem。
咦，都是固定了根元素是默认16px了，如何设施不同的移动设施呢？
问题提出也是答案所在，我们动态改变根元素html的字体默认大小不就行了嘛！见下：
rem自适应解决方案
使用rem布局的时候，为了兼容不同的分辨率，我们应该要动态的修正根字体的大小，让所有的用rem单位的子元素跟着一起缩放，从而达到自适应的效果。
嗯，下面就是动态改变根字体的大小了，采取的当然是javascript来进行控制啦，不然怎样知道像素比哦。
一种是获取像素比【像素比=物理像素/逻辑像素】通过devicePixelRatio，其兼容性在ie上要在11及11+，兼容性良好。罢了，不探讨IE浏览器了，看者慎用IE…
(function(){ var devicePixelRatio = window.devicePixelRatio || 1;})();嗯，在手机端上面适配，rem和viewport搭配效果更佳哦！完整代码片段如下：
<head> <meta name="viewport" /></head>(function(){ var fontSizeMatchDeviceWidth = function(){ var deviceWidth = document.documentElement.clientWidth || window.screen.width || 320, devicePixelRatio = window.devicePixelRatio || 1, fontSize = (Math.ceil(deviceWidth * 16 / 320)), scale = 1 / devicePixelRatio; // 默认的缩放 document.documentElement.style.fontSize = fontSize + 'px'; document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale='+'scale'+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no,viewport-fit=cover'); // 添加viewport-fit=cover适配iphone x }; (function(){ var ua = navigator.userAgent; if(/android/i.test(ua) || /ipad|itouch|iphone/i.test(ua)|| /tianqi/i.test(ua)){ fontSizeMatchDeviceWidth(); } else { // pc端优雅降级 document.documentElement.style.fontSize = '24px'; } })();})();在上面的基础上，增加点点样式，完整的一个demo走一下：
#container{ background: yellow; margin: 0 auto;}h1{ text-align: center;}
frontend/css/rem/rem_demo
如有纰漏，欢迎看到的各位小哥哥小姐姐指正 @～@！ 更多内容请前往我的github
frontend/css/rem/qiaoba2
