H5学习---html，css---媒体查询 移动端

介绍响应式网页

媒体查询

@media only screen and (min-width: 601px) and (max-width: 1200px){
	body{
		background: yellow;
	}
}
竖屏
	@media screen and (orientation:portrait){}
横屏
	@media screen and (orientation:landscape){}
断点值：
	iphone5 - 逻辑像素320px
	iphone6/7/8 - 逻辑像素375px
	iphonePlus - 逻辑像素414px

移动端

1.meta标签
	<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，因为我们不希望用户放大缩小页面）
2.单位px,%,pt,em,rem
	rem是根元素html的字体大小的倍数
	媒体查询改变不同断点区间根元素html的字体大小
	@media only screen and (max-width:320px ) {
			html{
				font-size: 12px;
			}
		}
		@media only screen and (min-width: 321px) and (max-width: 375px) {
			html{
				font-size: 14px;
			}
		}
		@media only screen and (min-width: 376px) {
			html{
				font-size: 16px;
			}
		}
3.ppi dpi dpr
	ppi像素密度，所表示的是每英寸所拥有的像素数量
	一般标准750X1334px尺寸(iphone6/7/8),物理像素
	代码设置的叫做逻辑像素
	dpr = 物理像素 / 逻辑像素