H5C3-day05

1.媒体查询语法

@media not|only mediatype and (expressions) and（expressions）...{
    CSS-Code;
}

1. mediatype：设备类型；

2. expressions：设备特性；

3. 使用 not，and 和 only 等逻辑操作符构建复杂的媒体查询,上面语法中的[ and (设备特性)]可以出现0~N次。

4. 可以对多个设备特性进行匹配。

1.1 最大宽度max-width

“max-width”指媒体类型小于或等于指定的宽度时，样式生效

@media screen and (max-width:480px){
	.box {
   		display:none;
  	}
}

1.2 最小宽度min-width

“min-width”与“max-width”媒体类型大于或等于指定宽度时，样式生

@media screen and (min-width:900px){
	.box{
		width: 980px;
	}
}

1.3 多个媒体特性使用

使用关键词"and"将多个媒体特性结合在一起

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

2.移动端布局

a.移动端单独制作

流式布局（百分比布局）

流式布局，就是百分比布局，也称非固定像素布局。

        通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

        流式布局方式是移动web开发使用的比较常见的布局方式。

flex 弹性布局（强烈推荐）

less+rem+媒体查询布局

混合布局

b.响应式

媒体查询

bootstarp

2.1 布局视口(layout viewport)

layout viewport(布局视口)：在PC端上，布局视口等于浏览器窗口的宽度。而在移动端上，由于要使为PC端浏览器设计的网站能够完全显示在移动端的小屏幕里，此时的布局视口会远大于移动设备的屏幕，就会出现滚动条。

2.2 视觉视口(visual viewport)

visual viewport(视觉视口)：用户正在看到的网页的区域。用户可以通过缩放来查看网站的内容。如果用户缩小网站，我们看到的网站区域将变大，此时视觉视口也变大了，同理，用户放大网站，我们能看到的网站区域将缩小，此时视觉视口也变小了。

2.3  理想视口(ideal viewport)

布局视口的一个理想尺寸，只有当布局视口的尺寸等于设备屏幕的尺寸时，才是理想视口。