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" />