视图理解

像素：

    一个像素就是屏幕能够显示一种特定颜色的最小区域
    一个设备的尺寸相同，但像素更加密集的时候，看起来越清晰

    1、设备像素：就是物理像素，一个设备的物理像素是固定的
    2、CSS像素：css一个抽象层

    3、这句话告诉浏览器，布局适口的宽度应与理想适口的宽度一样
         
    4、放大手机屏幕，则视觉窗口是缩小的，因为视觉中的像素变少了。所以放大缩小和视觉窗口是相反的。
    5、这句话是防止页面缩放
          
    6、meta标签的存在主要是让布局适口的尺寸和理想适口的尺寸相匹配

分辨率：

    1、物理分辨率：像素的数量除以英寸为单位的屏幕的宽度。可以得到设备每英寸的点数，简称DPI。(每英寸内的点数越多越清晰)

    2、 <meta>标签里面：
           
      其中缩放程度(init-scale=1  百分之一百的缩放)和视觉适口的宽度是相逆的，缩放程度大的适口宽度小

媒体查询:

    1、媒体查询其实就是css中的 if 语句，有以下三种类型

       

2、样式只有在布局适口小于400px(单位默认是px)的时候才会出现，使用min或者max控制上下线的范围

      

3、其中，and表示和，逗号表示或

     

  4、em根据的是根字体的大小，一般默认字体为16px，所以1em一般为16px，
       缩放过程中1em对应的多少个px是不变的，因为缩放是缩放css像素与字体font-size大小没有关系

Javascript:

   1、orientationchange 事件是在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。
        实用语法：$(window).on("orientationchange",function(event){...})

   2、当调整浏览器窗口大小时，发生 resize 事件。
         实用语法：对浏览器窗口大小进行计数：$(window).resize(function(){ $('span').text(x+=1); });

   3、window.innerWidth和document.documentElient.clientWidth区别：前者包括滚动条的宽度，后者不包括                                         document.documentElement.clientWidth/Height实用性高

   4、宽度大于等于600px时候的样式

        

   5、总结：