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

时间 2019-11-30

标签手机页面自适应解决方案 rem 布局栏目 CSS 繁體版

原文原文链接

如何使用？

这是rem布局的核心代码，这段代码的大意是：
若是页面的宽度超过了640px，那么页面中html的font-size恒为100px，不然，页面中html的font-size的大小为： 100 * (当前页面宽度 / 640)
因而，问题来了，为何要这样？别急，我先来一一回答javascript

为何是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布局。由于导航点击最多，因此给它一个固定的大小（其实就是高度固定，宽度自适应的方案）。你们能够看看淘宝的这个手机页面淘宝手机站，基本就是这种感受，底部导航和顶部搜索框用的高固定，宽自适应的方案，其他的部分基本都是随着浏览器宽度变化在等比例缩放。

最终页面代码首页代码大体以下

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head> 
 4  <meta charset="UTF-8">  
 5  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">  
 6 <script>   
 7 (function (doc, win) {
 8         var docEl = doc.documentElement,
 9             resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
10             recalc = function () {
11                 var clientWidth = docEl.clientWidth;
12                 if (!clientWidth) return;
13                 if(clientWidth>=640){
14                     docEl.style.fontSize = '100px';
15                 }else{
16                     docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
17                 }
18             };
19 
20         if (!doc.addEventListener) return;
21         win.addEventListener(resizeEvt, recalc, false);
22         doc.addEventListener('DOMContentLoaded', recalc, false);
23     })(document, window);
24 </script> 
25  /*你引进的资源*/
26 <title>标题</title> 
27 </head>
28 <body>
29  /*你的代码*/
30 </body>
31 </html>

2017-1-23 附加内容：css

rem这是个低调的css单位，近一两年开始崭露头角，有许多同窗对rem的评价不一，有的在尝试使用，有的在使用过程当中遇到坑就弃用了。可是我对rem综合评价是用来作web app它绝对是最合适的人选之一。html

rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem你们必定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很类似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。前端

为何web app要使用rem？

这里我特别强调web app，web page就不能使用rem吗，其实也固然能够，不过出于兼容性的考虑在web app下使用更加能突显这个单位的价值和能力，接下来咱们来看看目前一些企业的web app是怎么作屏幕适配的。java

一、实现强大的屏幕适配布局：

最近iphone6一下出了两款尺寸的手机，致使的移动端的屏幕种类更加的混乱，记得一两年前作web app有一种作法是以320宽度为标准去作适配，超过320的大小仍是以320的规格去展现，这种实现方式以淘宝web app为表明做，可是近期手机淘宝首页进行了改版，采用了rem这个单位，首页之内依旧是和之前同样各类混乱，有定死宽度的页面，也有那种流式布局的页面。web

咱们如今在切页面布局的使用经常使用的单位是px，这是一个绝对单位，web app的屏幕适配有不少中作法，例如：流式布局、限死宽度，还有就是经过响应式来作，可是这些方案都不是最佳的解决方法。浏览器

例如流式布局的解决方案有很多弊端，它虽然可让各类屏幕都适配，可是显示的效果极其的很差，由于只有几个尺寸的手机可以完美的显示出视觉设计师和交互最想要的效果，可是目前行业里用流式布局切web app的公司仍是挺多的，看看下面我收集的一些案例：安全

1.亚马逊app

2.携程iphone

3.兰亭

上面的网站都是采用的流式布局的技术实现的，他们在页面布局的时候都是经过百分比来定义宽度，可是高度大都是用px来固定住，因此在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，可是高度仍是和原来同样，实际显示很是的不协调，这就是流式布局的最致命的缺点，每每只有几个尺寸的手机下看到的效果是使人满意的，其实不少视觉设计师应该没法接受这种效果，由于他们的设计图在大屏幕手机下看到的效果至关因而被横向拉长来同样。

流式布局并非最理想的实现方式，经过大量的百分比布局，会常常出现许多兼容性的问题，还有就是对设计有不少的限制，由于他们在设计之初就须要考虑流式布局对元素形成的影响，只能设计横向拉伸的元素布局，设计的时候存在不少局限性。

2.固定宽度作法

还有一种是固定页面宽度的作法，早期有些网站把页面设置成320的宽度，超出部分留白，这样作视觉，前端都挺开心，视觉在也不用被流式布局限制本身的设计灵感了，前端也不用在搞坑爹的流式布局。可是这种解决方案也是存在一些问题，例如在大屏幕手机下两边是留白的，还有一个就是大屏幕手机下看起来页面会特别小，操做的按钮也很小，手机淘宝首页起初是这么作的，但近期改版了，采用了rem。

3.响应式作法

响应式这种方式在国内不多有大型企业的复杂性的网站在移动端用这种方法去作，主要缘由是工做大，维护性难，因此通常都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位，由于这样反而能够节约成本，不用再专门为本身的网站作一个web app的版本。

4.设置viewport进行缩放

天猫的web app的首页就是采用这种方式去作的，以320宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到416都就能够兼容iphone6 plus的屏幕了，这个方法简单粗暴，又高效。说实话我以为他和用接下去咱们要讲的rem都很是高效，不过有部分同窗使用过程当中反应缩放会致使有些页面元素会糊的状况。

rem能等比例适配全部屏幕

上面讲了一大堆目前大部分公司主流的一些web app的适配解决方案，接下来说下rem是如何工做的。

上面说过rem是经过根元素进行适配的，网页中的根元素指的是html咱们经过设置html的字体大小就能够控制rem的大小。