CSS中响应式设计
响应式设计
三个重要方面:
媒体查询：CSS语法，根据浏览器特性，提供规则。
流式布局：使用em或者百分比等相对单位设定页面总体宽度，布局随屏幕大小而缩放。
弹性图片：相对单位确保图片再大也不会超过容器。
媒体查询
@meida规则
在style中：
@media print {
nav {
display:none;
}
}要么当前页面打印，要不就不显示nav元素。
@meida screen and (max-width:568px) { .column {float:none; width:96%,margin:0 auto;} }
屏幕超过568像素，CSS取消.column元素的浮动，改为上下堆叠。
常用的媒体类型：
- all：匹配所有设备
- handled：匹配手持设备
- print：匹配分页媒体或者打印预览下的屏幕
- screen: 匹配彩色计算机屏幕
- tv：电视机等等
媒体特性：
- min-device-width和max-device-width，匹配设备屏幕尺寸
- min-width和max-width，匹配视口宽度(viewport)，如浏览器窗口宽度
- orientation（portrait和landscape）:匹配设备横屏还是竖屏
可以使用and,nott,or,all,only组合媒体类型和媒体特性。
link标签的media属性
<link type="text/css" media="print" href="css/print_styles.css" /> <link type="text/css" media="screen and (max-width:568px)" href="css/iphone_styles.css" />断点
断点(breakpoint):媒体查询起作用的屏幕宽度，例如：
@media screen and (max-width:640px) { /*CSS 规则*/ }
用
标签设定视口
<meta name="viewport" content="width=device-width; maximumscale=1.0" />