响应式设计
三个重要方面:
媒体查询: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" />