一窥响应式布局

源于一次百度的笔试题

设计响应式布局

CSS中的Media Query

能获取的值：设备的宽、高

语法结构

@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;}
 }

screen：彩屏电脑