html5,css3,通过 @media query实现响应式布局
例如:
外部应用:
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">
内嵌方式
当页面视图区域小于600px宽度的时候,css会被使用到。
Max-Width
@media screen and (max-width: 600px) { .class { background: #ccc; } }
Min-Width
当视图区域大于900px宽度的时候,css会被使用到。
@media screen and (min-width: 900px) { .class { background: #666; } }多个 Media Queries
你可以把多个media queries组合在一起,当视图区域宽度在600px到900px之间的时候,会使用下面的css。
@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; } }设备Width
下面的css会在 max-device-width为480px的时候使用,例如iphone。
note:max-device-width指的是设备实际分辨率,max-width指的是可是区域尺寸。
@media screen and (max-device-width: 480px) { .class { background: #000; } }
语法结构及用法
@media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules}