相信很多刚开始写移动端页面的同学都要面对页面自适应的问题，当然解决方案很多，比如：百分比布局，弹性布局flex（什么是flex），也都能获得不错的效果，这里主要介绍的是本人（不是本人，我只是搬运工，末尾有彩蛋）在实践中用的最顺手最简单的布局方案——rem（什么是rem）布局
rem布局非常简单，首页你只需在页面引入这段原生js代码就可以了
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=640){ docEl.style.fontSize = '100px'; }else{ docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
这是rem布局的核心代码，这段代码的大意是：
如果页面的宽度超过了640px，那么页面中html的font-size恒为100px，否则，页面中html的font-size的大小为： 100 * (当前页面宽度 / 640)
于是，问题来了，为什么要这样？别急，我先来一一回答
width: 3rem;
height: 2rem;
那要是宽55px，高37px呢？然后经过换算，，设置如下 ↓
width: 2.75rem;
height: 1.85rem;
是不是发现这换算起来有点麻烦啊，，，（当然，你要是心算帝请无视）
如果我们一开始把html的font-size设为100px呢？此时1rem = 100px，那么上面的宽55px，高37px的元素样式就可以这么设置 ↓
width: 0.55rem;
height: 0.37rem;
是不是换算起来简单多了？！
（当然可能有同学问，为什么不一开始把html的font-size设为1px呢，这样换算起来也简单，答：浏览器一般都有最小字体限制，比如谷歌浏览器，最小中文字体就是12px，所以实际上没有办法让1rem=1px。）
根据上面的js代码，如果页面宽度低于640px,那么页面中html的font-size也会按照（当前页面宽度/640）的比例变化。这样，页面中凡是应用了rem的作尺寸单位的元素都会随着页面变化而等比例缩放了！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <script> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=640){ docEl.style.fontSize = '100px'; }else{ docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script> /*你引进的资源*/ <title>标题</title> </head> <body> /*你的代码*/ </body> </html>
Iphone 6 下页面效果
Iphone 4 下页面效果
你们期待的本人终于出现啦~~~~哈哈哈哈~~~~
用这代码实践了下，感觉不错，之前我是用百分比的布局制作页面，主要说说实践的一些心得体会：
1、如果你整个页面都是图片形式，建议用百分比布局
2、如果涉及到文字及高度问题时，建议用以上所说的rem布局，因为不管百分比呀、媒体查询呀、什么鬼布局呀，本人都无法解决文字及高度屏幕自适应的办法，媒体查询简直不是人写的，工作量太大了。网上也有人使用视区相关单位vw,vh，感兴趣的可以度娘下。
3、以上使用100px作为恒值，但本人在实践中时，当我图片高度小于139px时，它会在图片下方填充空白直至139px，百思不得其解，这139的高度到底是什么鬼，有知道的麻烦您解释下。于是，本人用了20px作为恒值。
JS代码：
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>640){ docEl.style.fontSize = '20px'; }else{ docEl.style.fontSize = 20 * (clientWidth / 640) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
CSS主体样式：
.wrap{max-width:640px; min-width:320px; margin:0 auto; overflow:hidden;} .wrap img{max-width:100%;}
有人写rem布局时，会在css样式里也写恒值，我也试着写了下，但怎么改变大小都起不了作用，so....这个css恒值html{font-size:20px;}，并没有什么卵用。都是JS在控制字体大小，可有可无，不信你试试
但当你的主体样式宽度设置为100%时，建议把判断语句给删除，让界面中的字体大小完全自适应，如下：
JS代码：
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 20 * (clientWidth / 640) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
CSS代码：
.wrap{width:100%; overflow:hidden;} .wrap img{width:100%;}
以上是本人实践所得，要是你们还有更高深的自适应布局，希望你们能告诉我，谢谢！！！
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。