响应式布局

/*@media: 声明关键字
screen：设备的类型
and : 关键字 (连接，指定)
() : 媒体特性(就是屏幕尺寸)
{} ： 指定的样式
当 screen的屏幕尺寸 符合 指定的尺寸时， 执行指定的样式
max-width: 屏幕小于等于指定尺寸时 触发 (最多)
min-width: 屏幕大于等于指定尺寸时 触发 (最少)
*/

移动端开发的两种主流方案之一：  
响应式布局兼容
    1. 内容没有受到明显影响时，自适应宽高即可
    2. 内容受到明显的影响时，改变布局，来保证内容的清晰
    响应式布局:用于解决不同浏览器,不同分辨率以及不同设备的不同显示效果
    
    优点:
        1.面对不同分辨率的设备灵活性很强
        2.能够快捷的解决多设备显示适应的问题
    缺点:
        1.兼容各种设备工作量大,效率低,页面加载时间长
        2.一定程度上,会改变网站原有的布局结构,可能会出现用户混淆问题
    主流方案之二:  单独制作移动端的页面
    
   
   ### 设置 Viewport
   `<meta name="viewport" content="width=device-width, initial-scale=1.0">`
   width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

两个像素和一个像素比：
1)css像素(独立像素,逻辑像素) : 在CSS、JS中使用的一个长度单位。单位px
注：在pc端1物理像素等于1px，但是移动端1物理像素不一定等于1px
2)物理像素：屏幕的物理像素，又被称为设备像素，他是显示设备中一个最微小的物理部件。
任何设备屏幕的物理像素出厂时就确定了，且固定不变的
设备像素比： 简称为dpr， 它是物理像素和独立像素的对应关系(也就是比例)
备注：判断是否为高清时， 看一下dpr的值是否大于1。 一般情况下dpr为整数，
但是一些安卓的机型不为整数(奇葩)
通过：window.devicePixelRatio获得