viewport定義，彈性佈局，響應式佈局及LESS和SASS框架應用

 

一，移動端寬度設置

viewport視圖窗口，<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">，視窗寬度=設備寬度，默認縮放=1，不容許用戶縮放。

二，flexbox，彈性盒子模型：

1，在元素的css中添加display:-webkit-flex就能夠轉換成彈性盒模型了，而後在多個子元素的CSS中添加flex:1/2/3，就能夠讓子元素按定義的比例1/2/3分配填滿父元素。

2，混合劃分：

子元素能夠是固定寬度，也能夠是定義flex值，靈活運用，常見於
圖片採用固定寬度防止縮放失真，而後右邊的文字採用彈性佈局設置flex:1。
3，不定寬高的水平、垂直居中
CSS3方案：.myoff-wrapper{
position:absolute;
top:50%;
left:50%;
z-index:3;
-webkit-transform:translate(-50%,-50%);
border-radius:6px;
background:#fff;
}
更好的flexbox方案：設置父元素，讓子元素水平居中
.parent{
display:-webkit-flex;
justify-content:center;//子元素水平居中
align-items:center;//子元素垂直居中
}
更多應用：

三，響應式佈局：在不一樣設備不一樣分辨率下都有良好的用戶體驗

響應式佈局方法是依靠媒體查詢實現的：

媒體查詢類型：screen(屏幕)、print(打印機)、handheld(手持設備)、all(通用)
經常使用媒體查詢參數：width,height,device-width,device-height,orientation(檢查設備處於橫向lanscape仍是豎屏portrait)

em:根據父元素的font-size爲相對單位；
rem:根據html的font-size爲相對單位。

 

 

 

 1、Less

Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增長了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便製做主題、擴充。

Less 能夠運行在 Node、瀏覽器和 Rhino 平臺上。網上有不少第三方工具幫助你編譯 Less 源碼。

例如：

@base: #f938ab; .box-shadow(@style, @c) when (iscolor(@c)) { -webkit-box-shadow: @style @c; box-shadow: @style @c; } .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { .box-shadow(@style, rgba(0, 0, 0, @alpha)); } .box { color: saturate(@base, 5%); border-color: lighten(@base, 30%); div { .box-shadow(0 0 5px, 30%) } } 

編譯爲：

.box { color: #fe33ac; border-color: #fdcdea; } .box div { -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }

2、SASS

Sass 擴展了 CSS3，增長了規則、變量、混入、選擇器、繼承等等特性。Sass 生成良好格式化的 CSS 代碼，易於組織和維護。