px em rem %布局

作为前端，最基本的是要写出合格的页面。针对目前多种多样的设备，页面的写法也不一样。

1、最传统的是固定布局，单位为px，有一个版心，在版心内尺寸都是固定的。用于多种尺寸的电脑屏幕显示，中心是内容，两边留白。

2、流式布局，即百分比布局，这种单位为百分比，以整个屏幕为100%来布局，适合充满容器而简单的布局，复杂的布局难以适应。相似的单位还有vw,wh，屏幕的宽和高为100vw和100vh。

3、em布局。以上级字体为父单位的布局。需要层层计算，麻烦。

4、rem布局。这是目前最流行、最实用、基本能满足所有布局的单位。以html为根字体，计算简单。结合媒体查询或者js计算屏幕宽度，可以实现大部分屏幕的适配。

对应的js如下：

!(function(doc, win) {
    var docEle = doc.documentElement,//获取html元素
        event = "onorientationchange" in window ? "orientationchange" : "resize",//判断是屏幕旋转还是resize;
        fn = function() {
            var width = docEle.clientWidth;
            if (width<=320) {
                width=320;
            }else if(width>=640){
                width=640;
            }
            width && (docEle.style.fontSize = 100 * (width / 375) + "px");//设置html的fontSize，随着event的改变而改变。
        };
     console.log(docEle);
    win.addEventListener(event, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

　5、flexible布局。也是以rem为单位，与传统视口标签

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

的写法不一样，这种做法所得到的页面宽度是实际的宽度，根据设备的分辨率，会动态计算dpr的值，在页面里面写的尺寸大小和对应设计稿的值是一样的。

优点：设计稿上的值测量值直接写到页面上。

缺点：主要对ios做了分辨率区分，安卓没有所有都做分辨率区分。

注意：当有大段文字时，显示出来的文字和预期差别很大，解决办法是对这个盒子设置max-height。或者在不同的dpr下写死文字大小。

 

具体可以参考https://github.com/amfe/lib-flexible

 

转载于:https://www.cnblogs.com/yunrundetizi/p/5174893.html