## 柵格系統
**示例鏈接：** http://www.lsxm.tech/doc/demo/adaptation.html
用格子設計版面布局,板塊寬度用百分比.
容器（container），行（row）和列（col）
~~~
.container{
width:1000px;
margin:0 auto;
}
.row{
overflow: hidden;
}
[class*="col-"]{{
float:left;
}
.col-1-3{
width:33.3333%;
}
.col-2-3{
width:66.6666%;
}
.col-1-2{
width:50%;
}
<div class="container">
<div class="row">
<div class="col-1-2"></div>
<div class="col-1-2"></div>
</div>
</div>
~~~
http://v3.bootcss.com/css/#grid
## 響應式布局
不同分辨率下用不同樣式
#### 一、指定樣式文件
如果屏幕寬度小于400像素(max-device-width: 400px)，就加載minScreen.css文件。
~~~
<link href="minScreen.css" rel="stylesheet" media="screen and (max-width: 400px)" type="text/css" />
~~~
如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件
~~~
<link href="smallScreen.css" rel="stylesheet" media="screen and (min-width: 400px) and (max-width: 600px)" type="text/css" />
~~~
#### 二、直接指定樣式
<div class="media-screen"><br>
body{
background:blue;
}
/* 當瀏覽器的可視區域小于980px */
@media screen and ( max-width: 980px ) {
body{
background:green;
}
}
/* 當瀏覽器的可視區域小于650px */
@media screen and ( max-width: 650px ) {
body{
background:yellow;
}
}
</div>
http://www.w3cways.com/1243.html
## PS
* min-device-width是指定設備的最小寬度。
* min-width是指定瀏覽器窗口的最小寬度。
