移动web——viewport（视口）

1.手机拥有了浏览器的初期并没有专门为移动设备设计页面，造成的直接结果就是访问的页面是直接将电脑页面进行缩放，操作起来十分不便，viewport就是用来解决这个问题的

2.viewport视口属性（该属性只有在移动端浏览器上才有用）：移动设备上用来显示网页的区域（如果把移动该设备的浏览器当做相框的话，viewport就相当于相框中的画，可能会比相框小/大，需要的就是刚好一样大）

（1）修改viewport：可以通过meta标签去修改viewport的值，防止出现滚动条

    移动web的常见设置：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

        ·name = 'viewport'告诉浏览器这个meta标签设置的是viewport属性

        ·content设置的是viewport属性的值（属性的赋值：属性名=属性值，其中属性名不是乱写的而是有固定的取值）

        ·width：宽度，其属性值device-width表示的是设备的宽度 （不需要给单位）

            如果设备的屏幕大小比设备的视口大小要大就是能够正常显示的

        ·height：高度一般不设置，会让内容来撑大       

            initial-scale=1.0   -->   视口默认的缩放比例   

            maximum-scale=1.0   -->   最大的缩放值

            minimum-scale=1.0  -->   最小的缩放值

            user-scalable   -->   是否允许用户缩放，一般其属性值是no，表示禁止用户缩放  

（2）可选值

• width:
  • 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
• initial-scale:
  • 设置页面的初始缩放值，为一个数字，可以带小数
• minimum-scale:
  • 允许用户的最小缩放值，为一个数字，可以带小数
• maximum-scale:
  • 允许用户的最大缩放值，为一个数字，可以带小数
• height:
  • 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
• user-scalable:
  • 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

（3）在webStorm中将窗口作为移动端的快捷方式：meta:vp+tab

视口的作用：在移动浏览器中当页面宽度超出设备的宽度，浏览器内部虚拟了一个页面容器，将这个页面容器缩放到设备这么大，然后展示

目前大多数手机浏览器的视口（承载页面的容器）宽度都是980px

视口的宽度是可以通过meta标签去设置的：content里面的width

第三方框架的核样式表文件一般就是他的包名.css或者是包名.min.css，然后带min的一般都是压缩的，我们引用的是没有压缩的