响应式Web设计-Viewport

viewport是用户网页的可视区域。
viewport翻译为中文可以叫做"视区"。

<metaname="viewport"content="width=device-width,initial-scale=1.0">

height：和width相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次load的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

媒体功能

@mediaonlyscreenand(max-width:500px){
body{
background-color:lightblue;
}
}

max-width定义输出设备中的页面最大可见区域宽度。

例子

*为移动端设计:*/
[class*="col-"]{
width:100%;
}
@mediaonlyscreenand(min-width:768px){
/*Fordesktop:*/
.col-1{width:8.33%;}
.col-2{width:16.66%;}
.col-3{width:25%;}
.col-4{width:33.33%;}
.col-5{width:41.66%;}
.col-6{width:50%;}
.col-7{width:58.33%;}
.col-8{width:66.66%;}
.col-9{width:75%;}
.col-10{width:83.33%;}
.col-11{width:91.66%;}
.col-12{width:100%;}
}