viewport移动端适配，读文笔记

文章地址：

viewport移动端适配

笔记：

1. 移动端适配目的：
   
   希望在屏幕尺寸大小不同的手机上进行访问页面时，页面显示的效果能合理的展示，我们期望的是在手机屏幕较大时显示的内容比较大一些，手机屏幕小的时候页面的内容也会缩小进行自适应。

2. 手机端适配代码

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

不允许缩放，初始缩放值为1，最大缩放值为1，最小缩放值为1

目的？

让页面的宽度等于设备宽度，实际上，它就是设置了理想视口，将布局视口的宽度设置成了理想视口（浏览器/设备屏幕的宽度）。

3.适配的几种方案

1.css3媒体查询，pass
优点：
            方法简单，只需修改css文件
	调整屏幕宽度时不用刷新页面就可以响应页面布局
缺点：
	代码量大，不方便维护
	不能够完全适配所有的屏幕尺寸，需要编写多套css样式  

2.百分比布局方案
    那么需要清楚一个问题，各个子元素或属性的百分比是根据谁来设定呢？
    1. 子元素width、height的百分比:子元素的width或height中使用百分比，是相对于子元素的直接父元素
    2. margin和padding的百分比：在垂直方向和水平方向都是相对于直接父亲元素的width，而与父元素的height无关
    3. border-radius的百分比：border-radius的百分比是相对于自身宽度，与父元素无关

优点：
    宽度自适应，在不同的分辨率下都能达到适配
缺点：
    百分比的值不好计算
    需要确定父级的大小，因为要根据父级的大小进行计算
    各个属性中如果使用百分比，相对父元素的属性并不是唯一的
    高度不好设置，一般需要固定高度

3. rem方案

<script type="text/javascript">
    (function() {
        var deviceWidth = document.documentElement.clientWidth;
        deviceWidth = deviceWidth < 320 ? 320 : deviceWidth > 640 ? 640 : deviceWidth;
        document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
    })();
</script>

优点：
    rem单位是根据根元素font-size决定大小，只要改变font-size的值，以rem为固定单位的元素大小也会发生响应式的改变

缺点：
    必须通过一段js代码控制font-size的大小
    控制font-size的js代码必须放在在页面第一次加载完成之前，并且放在引入的css样式代码之前。

4. vm、vh
vw	  相对于视口的宽度，视口宽度是100vw
vh	  相对于视口的高度，视口宽度是100vh
vmin	vw和vh中较小的值
vmax	vw和vh中较大的值

优点：
    指定vw\vh相对与视口的宽高，由px换算单位成vw单位比较简单
    通过postcss-px-to-viewport插件进行单位转换比较方便

缺点：
    直接进行单位换算时百分比可能出现小数,计算不方便
    兼容性- 大多数浏览器都支持、ie11不支持
    少数低版本手机系统 ios8、android4.4以下不支持

最后，有一个问题，既然百分比和vw都是需要计算百分比，那么两个方案的不同之处？
%	width、height等大部分相对于直接父元素、border-radius、translate、background-size等相对于自身
vw	只相对于视口宽度

4.现在的工作团队是怎么获取font-size的？怎么做页面适配的？

(function (doc, win) {
    var recalc = function () {
        var docEl = document.getElementsByTagName("html")[0];
        var bodyEl = document.getElementsByTagName("body")[0];
        /*
        var obj = { 320:1, 360:1, 375:1, 400:1, 414:1, 440:1, 480:1
                , 520:1, 560:1, 600:1, 640:1, 680:1, 720:1
                , 760:1, 800:1, 960:1, 1440:1, 1280:1,1920:1,1080:1
              };
         if(obj[docEl.clientWidth]) {
            return;
        }
         */
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) {return;}
        docEl.style.fontSize =  clientWidth/10 + 'px';
        bodyEl.style.maxWidth =  clientWidth + 'px';
    };
    recalc();
    if (!doc.addEventListener) return;
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

恩，没啥可特别的，之前还考虑了手机横屏后的效果，现在都屏蔽了，就记住网上的写法就好，恩！