移动端小记

媒体查询设置root

@media screen and (min-width: 320px) {

    html {font-size: 14px;}

}

利用JS动态设置

!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

移动端单位 
------------------------------------------------
rem (font size of the root element)   root=>html

vw/vh  (view width/height) 共100份

eg：width：10vw (占view宽度的10份)
    height：10vh

vmax 取view宽和高里面最大的
vmin 取view宽和高里面最小的

retina  2倍 或者 3倍的屏幕（苹果提出的） 主要用于icon图标

.div{
    background:url(icon.png) 0 0 no-repeat;
    background-image:-webkit-image-set(url(icon.png) 1x,url(icon@2x.png) 2x)
}

//-webkit-image-set 设置 让retina的屏幕 看图更清晰

<img src="icon.png" srcset="icon@2x.png 2x" alt="">

//img情况下 设置 srcset 让retina的屏幕 看图更清晰

或者直接用background:url（icon@3x.png）0 0 no-repeat,然后background-size:cover  但是加载速度会有影响

base64
    把图片转成64进制的编码

移动端页面：不用考虑PC pad    viewport | rem
    适配（兼容）适应各个不同的设备
    浏览器、微信（通过朋友圈等）、QQ(内置浏览器)、UC（pc的ie6）
    国产手机
    
    PC版和手机版分开做：数据交互量很大（在PC上展示的内容不能完全放在移动端）

响应式页面
    必须共享一套HTML结构，样式不同而已 ，通过设备的分辨率来自动去切换样式
    只适用于简单的页面：博客、新闻、简单的公司门户（公司的小网站）

viewport（兼容主流机型）
  

 <meta id="viewport" name="viewport" content="width=640,initial-scale-.5.maximum-scale=.5,minimun-scale-.5,user-scalable=no">

手机屏幕尺寸：
    iphone 5  320        0.5
    iphone 6  375        ?
    iphone 6p 414
页面是640
    initial-scale=1 初始缩放比例
    maximum-scale=1 最大
    minimum-scale=1 最小
    
    初始缩放比例=屏幕尺寸/网页尺寸（设计图尺寸）

    之前  改的是 html 字体大小  所有的元素通过html 的大小来做调整

获取屏幕的宽度：window.screen.width

1.定宽
2.rem
3.viewport

参考：设计规范：https://www.zhihu.com/question/25308946
    px转rem:https://www.520ued.com/tools/rem

判断是否是横屏：

window.onload=window.onresize=function(){
    if(window.orientation=="-90"||window.orientation=="90")    {
        alert("请竖屏观看");
    }
}

响应式：
    兼容的设备更多
    PC、Pad、移动端（和上面的纯移动端思路是两回事）、IE6-8
    一套HTML结构，去适应多种不同的布局
    需要兼容的尺寸：
        pc的普屏 1000（方的显示器：1024*768）
        pc 宽屏  1190/1200/1210/1600（1366 * 768 / 1440 * 768 / 1920 * 1080）
        pad  768  横屏（1024*768）  竖屏（768*1024）
        phone  分辨率就不一定了
        
    原则：所有的响应式页面，永远从最低的分辨率开始写起（phone>pad>pc>pc宽屏）

    做法：以手机端样式为基础样式，兼容其他设备样式        

媒体查询：(放在最后去做，css遵循顺序规则)
    声明：@media
    条件：min-width、height/max-width、height/设备类型
        and:并且
        not:不是什么
        only:不支持忽略
        
        device-width/min-device-width/max-device-width
    
        orientation:landscape 横屏
        orientation:portrait 竖屏
            
    @example1

    @media (min-width:768px){ //pad
        .box{
            width:600px;
        }
    }
    @media (min-width:1000px){ //pc
        .box{
            width:1000px;
        }
    }

    @example2

    @media (min-width:768px) and (max-width:999px){ //pad  >=768&&<=999
        .box{
            width:600px;
        }
    }
    @media (min-width:768px) not screen{ 
        .box{
            width:600px;
        }
    }
    @media (min-width:768px) only screen{ 
        .box{
            width:600px;
        }
    }

@example3
    

@media (min-width:768px) and (orientation:landscape){ 
        .box{
            width:600px;
        }
    }

------------------------------------------------end
viewport布局

<meta name="viewport" content="width=640">

移动端（rem）、响应式布局

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

*使用mobile-util.js可以省略这个meta  js里面会自动网页面加这个meta