手机端页面自适应解决方案

手机端页面自适应解决方案—rem布局

阅读量：4085 次

发布时间：2019-05-25

本文共 5292 字，大约阅读时间需要 17 分钟。

该方案目前已过时，这里是更加完美的替代方案——

相信很多刚开始写移动端页面的同学都要面对页面自适应的问题，当然解决方案很多，比如：百分比布局，弹性布局flex（），也都能获得不错的效果，这里主要介绍的是本人在实践中用的最顺手最简单的布局方案——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)
于是，问题来了，为什么要这样？别急，我先来一一回答

为什么是640px？
对于手机屏幕来说，640px的页面宽度是一个安全的最大宽度，保证了移动端页面两边不会留白。注意这里的px是css逻辑像素，与设备的物理像素是有区别的。如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为640 x 1136px，而它的CSS逻辑像素数为320 x 568px。
如果要切移动端页面，你可以先把效果图宽度等比例缩放到640px，很好用。

为什么要设置html的font-size？
rem就是根元素（即：html）的字体大小。html中的所有标签样式凡是涉及到尺寸的（如： height,width,padding,margin,font-size。甚至，left,top等）你都可以放心大胆的用rem作单位。
如果你把html的font-size设为20px，前面说过，rem就是html的字体大小，那么1rem = 20px。
此时，此时宽60px，高40px的元素样式就这样设置如下 ↓
```
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的作尺寸单位的元素都会随着页面变化而等比例缩放了！

都哪些情况可以用rem布局？
大部分情况下都可以用rem布局这个方法，当然具体还要看情况而定。拿我们公司项目举例，只有底部的导航不用rem，而是用的flex布局。因为导航点击最多，所以给它一个固定的大小（其实就是高度固定，宽度自适应的方案）。大家可以看看淘宝的这个手机页面，基本就是这种感觉，底部导航和顶部搜索框用的高固定，宽自适应的方案，其余的部分基本都是随着浏览器宽度变化在等比例缩放。

最终页面代码首页代码大致如下

  
      
       /*你引进的资源*/标题  /*你的代码*/

rem布局实践应用

Iphone 6 下页面效果

Iphone 4 下页面效果

原文链接：

使用实现布局，应该算是当前移动前端的一大趋势，有些人对此还有点迷惑，搞不懂是如何实现自适应布局，如何根据设计稿来调整rem的值？rem布局如何用雪碧背景图片？rem一定要加载js吗？rem的根html font-size设置为多少合适？看看这篇文章，也许能帮到你。

这些问题整理来自之前发表过的文章，细心的读者也可以自己翻翻之前的内容找到答案，本文统一给个回复，如果对你有用，还请点个赞，谢谢!

rem自适应原理

rem是根据html的font-size大小来变化，正是基于这个出发，我们可以在每一个设备下根据设备的宽度设置对应的html字号，从而实现了自适应布局。更多介绍请看这篇文章：。

rem的值

目前有两种，一种是根据js来调整html的字号，另一种则是通过媒体查询来调整字号。

使用js

;(function(designWidth, maxWidth) {	var doc = document,		win = window;	var docEl = doc.documentElement;	var tid;	var rootItem,rootStyle;	function refreshRem() {		var width = docEl.getBoundingClientRect().width;		if (!maxWidth) {			maxWidth = 540;		};		if (width > maxWidth) {			width = maxWidth;		}		//与淘宝做法不同，直接采用简单的rem换算方法1rem=100px		var rem = width * 100 / designWidth;		//兼容UC开始		rootStyle="html{font-size:"+rem+'px !important}';		rootItem = document.getElementById('rootsize') || document.createElement("style");		if(!document.getElementById('rootsize')){		document.getElementsByTagName("head")[0].appendChild(rootItem);		rootItem.id='rootsize';		}		if(rootItem.styleSheet){		rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)		}else{		try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}		}		//兼容UC结束		docEl.style.fontSize = rem + "px";	};	refreshRem();	win.addEventListener("resize", function() {		clearTimeout(tid); //防止执行两次		tid = setTimeout(refreshRem, 300);	}, false);	win.addEventListener("pageshow", function(e) {		if (e.persisted) { // 浏览器后退的时候重新计算			clearTimeout(tid);			tid = setTimeout(refreshRem, 300);		}	}, false);	if (doc.readyState === "complete") {		doc.body.style.fontSize = "16px";	} else {		doc.addEventListener("DOMContentLoaded", function(e) {			doc.body.style.fontSize = "16px";		}, false);	}})(640, 640);

你可以把上面的内嵌到html的head中，换算比例是1rem=100px，为了计算方便，你可以在我的一个项目下载完整的结构和一个压缩的js。

上面代码中的关键代码是：

var width = docEl.getBoundingClientRect().width;var rem = width * 100 / designWidth;docEl.style.fontSize = rem + "px";

第一行代码，获取移动设备的宽度，第二行，rem的值等于(设备的宽度)x100/(设计稿宽度)，第三行，设置html的字号为第二行的值。

有些人可能会注意到第二行代码跟淘宝的那个有所区别，区别就在于rem的换算比例，这里你可以任意改动为实际中的情况，比如有人喜欢用20px，那你可以将上面的100改为20，换算比例则改为1rem=20px。关于上面这段代码可以看之前的文章：。

还有的人要用回淘宝的那个，那么第二行代码可以变为var rem = width/10; 换算比例则改为根据设计稿的宽度来调整了，假设我们的设计稿宽是640的，则html的字体大小则被设为64px.则相当于1rem=64px。具体实现请看之前的文章：。

使用媒体查询

说到底，上面的js代码不就是根据不同的设备调整对应的html字号嘛，那么我们根据实际的设备，来加上相应的字号不就行了吗？

我们知道html的默认字号是16px，则对应的设备下可以通过设置对应的font-size使其有一致的缩放比例。

//code from http://caibaojian.com/rem-responsive-2.htmlhtml {font-size: 62.5%}@media only screen and (min-width: 481px) {html {font-size:94%!important}}@media only screen and (min-width: 561px) {html {font-size:109%!important}}@media only screen and (min-width: 641px) {html {font-size:125%!important}body {max-width: 640px}}

上面的代码则是通过1rem=20px来换算的，从哪里看出来呢？从最大的一个值640出发，假如你的设计稿是750的话，那你还要设计更多的媒体查询，换算比例保持一致就可以了。那如果我想要换算比例为1rem=100呢？按照上面的规则，最大的值为：html:font-size:100/16*100%，其它的则按比例，比如480px，则为480/640*(100/16*100%)。

使用雪碧图

国内的很多人都提倡使用字体图标或者用SVG的方式来实现，但这些在小项目中明显是有点不实际。我通常使用下面两种方式。

第一种将背景图片切成一个，然后换算成base64.的方式，或者使用sass的方式转换，不过有弊端就是样式文件会增大，看个人衡量。

第二种则是通过背景图片的百分比精准定位，详情见这篇文章：。

或者对于精准度不太高，其实使用rem定位也可以，就是要把相邻图片隔开些。

来源：

转载地址：http://tzeni.baihongyu.com/

你可能感兴趣的文章