免费注册

你用过媒体查询,或针对移动端的布局/CSS吗?

媒体查询
68
1

最佳答案

媒体查询,就是响应式布局。通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。
语法结构及用法:@media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules}。
示例如下:
 /* 当浏览器的可视区域小于980px /
 @media screen and (max-width: 980px) {
 #wrap {width: 90%; margin:0 auto;}
 #content {width: 60%;padding: 5%;}
 #sidebar {width: 30%;}
 #footer {padding: 8% 5%;margin-bottom: 10px;}
 }
 /
当浏览器的可视区域小于650px */
 @media screen and (max-width: 650px) {
#header {height: auto;}
#searchform {position: absolute;top: 5px;right: 0;}
#content {width: auto; float: none; margin: 20px 0;}
#sidebar {width: 100%; float: none; margin: 0;}
}

撰写更好的答案