css3-04 响应式布局

写在前面:响应式布局是一兼容多,并非每个终端做特定的版本
一,viewport
viewport是手机浏览器的的一个虚拟窗口,比手机屏幕大的多,因此手机可以通过滑动来访问不兼容手机端的电脑网页。
<meta name="viewport" content="width=device-width, initial-scale=1.0">

width：控制 viewport 的大小，可以具体的值,也可 为device-width 为设备的宽度
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
二,响应式布局原理 
响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。首先我们可以计算每列的百分比: 100% / 12 列 = 8.33%。
* {box-sizing: border-box;}
.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%;}
[class*="col-"] {//每列都进行浮动
    float: left;
    padding: 15px;
}//每个浮动的块后面都进行清除浮动
[class*="col-"]:after {
    content: "";
    clear: both;
    display: block;
}

媒体查询
使用 @media 查询，可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果需要设置设计响应式的页面，pc和手机端,平板端当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
@media all and (max-width:1000px) and (min-width:400px){
div{color:red;
}
}

Less的简单使用
lessc style.less style.css

less基本写法:
@primarycolor: #FF7F50;
@color:#800080;
h1{
color: @primarycolor;
}
h3{
color: @color;
}