rem自适应移动端布局

简介

在页面整体布局中，页面元素的尺寸大小（长度、宽度、内外边距等）和页面字体的大小也是重要的工作之一。

网站建设哪家好，找成都创新互联公司！专注于网页设计、网站建设、微信开发、小程序制作、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了安居免费建站欢迎大家使用！

一个合理设置，则会让页面看起来层次分明，重点鲜明，赏心悦目。反之，一个不友好的页面尺寸和字体大小设置，则会增加页面的复杂性，增加用户对页面理解的复杂性；甚至在当下访问终端（iPhone、iPad、PC、Android…）层出不穷的今天，适应各式各样的访问终端，将成为手中的一块“烫手的山芋”。

所以在近几年，“九宫格”式的“流式布局”再度回归。为了提供页面布局，及其它的可维护性、可扩展性，我们尝试将页面元素的大小，以及字体大小都设置为相对值，不再是孤立的固定像素点。使其能在父元素的尺寸变化的同时，子元素也能随之适应变化。以及结合少量最新CSS3的@media查询，来实现“响应式布局”，bootstrap这类CSS框架大势兴起。

然而在CSS中，W3C文档把尺寸单位划为为两类：相对长度单位和绝对长度单位

相对单位：

%：相对单位，它是相对于父级(自身)大小进行定位

缺点：能确定范围的还是比较好计算，对于不太好确定值的地方不好使用百分比，并且会导致变形，高度一般不好控制

em：相对于当前容器的字体大小进行变化，比如当前容器内字体大小为20px，那么1em = 20px

缺点：会根据当前容器字体大小发生变化，假设每个容器字体大小不一致，那么计算会非常繁琐

rem：font size of the root element。相对于当前根(html)元素的字体大小进行变化，比如当前设置html的字体大小为20px，那么1rem = 20px。浏览器默认的1rem = 16px

绝对单位：

px：像素单位是绝对单位，你设置了多少，不管什么屏幕下，都会保持不变。

缺点：任何情况下都是固定值

em和rem的区别点击查看

如何才能使用rem进行适配呢？

字体大小
- 值根据html根元素大小而定，同样可以作为宽度，高度等单位
适配原理
- 将px替换成rem，动态修改html的font-size适配
兼容性
- Ios6以上和android2.1以上，基本覆盖所有流行的手机系统

下面是我平时写移动端使用的rem自适应配置：

// 动态修改 html font-size 大小
// 通过js操控根元素的字体大小,从而做到屏幕适配
!(function(doc,win){
var docHtml =doc.documentElement;
// 判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    resizes= function(){
// 获取当前屏幕的大小
        var cw =docHtml.clientWidth;
        
// 如果没有获取到当前屏幕的大小
        if(!cw) return;
        
if (cw >= 750) {
            docHtml.style.fontSize= '100px';
        }else {
// 动态修改font-size 100 * (375 / 750) = 50 （iPhone6/7/8为例）
            docHtml.style.fontSize = 100 * (cw / 750) + 'px';
        }
    }
if (!doc.addEventListener) return;
/*
        addEventListener事件方法接受三个参数：
        （1）事件名
        （2）回调执行函数
        （3）是否冒泡
*/ 
    win.addEventListener(resizeEvt,resizes,false);
// 绑定浏览器缩放与加载事件
    doc.addEventListener('DOMContentLoaded', resizes, false); 
})(document,window)

名称栏目：rem自适应移动端布局
文章路径：http://scyanting.com/article/dsojepp.html

rem自适应移动端布局

简介

如何才能使用rem进行适配呢？

其他资讯