29
2020
04

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

媒体查询,就是响应式布局。通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。


语法结构及用法:@media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules}。


示例如下:




 1 /* 当浏览器的可视区域小于980px */

 2 @media screen and (max-width: 980px) {

 3 #wrap {width: 90%; margin:0 auto;}

 4 #content {width: 60%;padding: 5%;}

 5 #sidebar {width: 30%;}

 6 #footer {padding: 8% 5%;margin-bottom: 10px;}

 7 }

 8 /* 当浏览器的可视区域小于650px */

 9 @media screen and (max-width: 650px) {

10 #header {height: auto;}

11 #searchform {position: absolute;top: 5px;right: 0;}

12 #content {width: auto; float: none; margin: 20px 0;}

13 #sidebar {width: 100%; float: none; margin: 0;}

14 }




« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。