自我学习第十四天--移动端的准备

1、媒体查询

媒体查询可以在不同设备的分辨率下设置内容的样式，也是响应式网站的核心原理

语法：
@media 设置 关键字 （表达式）{

}



栗子：
@media all and (max-width:1000px){
	body{
		background:red;
	}
}

---

2、竖屏的样式

    /* 竖屏的样式 */
    @media screen and (orientation:portrait){
        body{
            background: red;
        }
    }
    /* 横屏的样式 */
    @media screen and (orientation:landscape){
        body{
            background:green;
        }
    }

---

3、禁止网页内容缩放

（响应式网站和移动端必须设置）
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
这段代码的几个参数解释：
width = device-width：宽度等于当前设备的宽度
initial-scale： 初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

---

4、移动端的准备

物理像素：ps 测量的像素	750px

逻辑像素：屏幕上显示的像素和最终css设置的像素	375px

dpr	设备像素比=物理像素 \ 逻辑像素

	  ps设计图     手机分辨率     dpr 
 iphone 4/5     640px        320px      2
 iphone 6/7/8   750px        375px      2
 iphone 6/7/8+  1242px       414px      3
 iphoneX        1125px       375px      3



 栗子：
        如果是750px的设计图，测量的内容是100px
            先确定dpr  2
            css的大小   100px /2  =50px