開發移動端頁面和響應式布局
響應式布局
響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容 多個終端，而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。
由於響應式布局要針對不同的視口尺寸，對樣式作出更多的修改，因此並不像流式布局那樣讓寬度 自動適應那么簡單。
實現響應式布局最核心的技術就是使用媒體查詢（media selector）。
媒體查詢是CSS3引入的概念，是指針對不同的設備、不同的視口尺寸，使用不同的樣式代碼。
媒體查詢的書寫格式如下：
@media screen and (min‐width:1200px){ /* 視口 ≥ 1200px 要應用的樣式 */ } @media screen and (min‐width:992px) and (max‐width:1200px){ /* 992px ≤ 視口 < 1200px 要應用的樣式 */ } @media screen and (max‐width:992px){ /* 視口 <992px 要應用的樣式 */ }
常見的視口尺寸
視口尺寸和設備關系表 視口 設備 ≥1200px 大屏幕： 投影儀 電視 PC端 ≥992px && <1200px 中等屏幕： 上網本、小型筆記本 ≥768px && <992px 小屏幕：平板 <768px 超小屏幕：手機
根據上述的關系表，再結合你網站的實際情況，就可以很容易的得出你需要編寫的媒體查詢代碼。
比如，我的網站只考慮兩種情況：
1.手機端顯示一種風格
2.其他設備共享一種風格
那么對某個需要響應式布局的元素，我的CSS代碼應該類似下面的格式：
/* 元素共有的樣式 */
...
/* 除手機端之外的樣式*/
@media screen and (min‐width:768px) {
...
}
/* 手機端的樣式 */
@media screen and (max‐width:768px) {
...
}
在Sass中使用媒體查詢
開發一個實際的項目時，我們通常會選擇一些預編譯器來處理我們編寫的CSS源代碼，比如 SASS。很多預編譯器都對媒體查詢有很好的支持。
Sass 中 @media 指令與 CSS 中用法一樣，只是增加了一點額外的功能：允許其在 CSS 規則中嵌 套。如果 @media 嵌套在 CSS 規則內，編譯時，@media 將被編譯到文件的最外層，包含嵌套的 父選擇器。這個功能讓 @media 用起來更方便，不需要重復使用選擇器，也不會打亂 CSS 的書寫 流程。
示例：
.sidebar{
width: 300px;
@media screen and (min‐width:768px) {
width: 500px;
}
}
開發移動端頁面
移動端獨有 的一些特性，需要我們在開發時特別關注。這些特性包括：
1. 移動端的視口寬度問題
2. 移動端誤觸造成的縮放問題
3. 移動端元素的尺寸問題
移動端的視口寬度問題
關鍵字 device-width ，該關鍵是讀取當前移動設備的寬度.
<meta name="viewport" content="width=device-width">
這樣就解決了移動端視口寬度和自身寬度不一致的問題。
移動端誤觸造成的縮放問題
當用戶用手指在移動端滑動網頁的時候，手機往往提供下面的功能：
快速雙擊，可放大頁面
雙指收放，可放大縮小頁面
禁止用戶對網頁進行縮放的方法：
<meta name="viewport" content="width=device-width, initial-scale=1.0, min imum-scale=1.0, maximum-scale=1.0, user-scalable=0">
意思分別是：
1、initial-scale=1.0 ：初始縮放比例為1.0（原始大小），這句代碼的目的是防止用戶 縮放的，
2、minimum-scale=1.0 ：網頁小的縮小比例為1.0（原始大小），設置這句代碼的目的是為 了放置某些程序（比如JS）無意中修改了網頁的縮小比例
3、maximum-scale=1.0 ：網頁大的放大比例為1.0（原始大小），設置這句代碼的目的是為 了放置某些程序（比如JS）無意中修改了網頁的放大比例
4、user-scalable=0 ：這句代碼才是不允許用戶對網頁進行縮放
移動端元素的尺寸問題
尺寸隨着視口寬度的變化而變化
方法：
1、首先，寫一段JS代碼，應用到網頁
!(function(win, doc) {
function setFontSize() {
var winWidth = window.innerWidth;
doc.documentElement.style.fontSize = (winWidth / 1080) * 100 + 'px';
}
var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
var timer = null;
win.addEventListener(evt, function() {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}
}, false);
//初始化
setFontSize();
}(window, document));
- 將上述代碼中的 設計稿寬度 替換為設計稿的實際寬度，比如1080（不要加單位px）
- 將上述代碼中的 比例 替換為一個合適的值，比如100
這段代碼它是不斷監控視口寬度的變化，始終保證：
根元素html的字體大小 = (視口寬度 / 1080) * 100
比如，iphoneX的視口寬度為：375，於是，在iphoneX中，根元素html的字體大小 為： (375/1080)*100 = 34.72px
2、css中的所有像素值變化為使用rem單位
rem單位是相對於根元素html字體大小的（如果根元素沒有設置字體大小，則相對於基 准字號）。而現在，根元素的字體大小，正好反映了視口的寬度。
一個元素某個尺寸的rem值公式如下：
rem值 = 設計稿中的尺寸 / 100
比如，設計稿中某個元素的寬度為100像素，那么應該設置它的寬度為 1rem ，這樣一來，當視口 尺寸等於設計稿尺寸1080時，根元素的字體大小為 (1080/1080)*100 = 100px ，它的寬度 為 1rem = 100px ；如果視口尺寸變小了，比如變成了375，那么根元素的字體大小為 (375/1080)*100 = 34.72px ，那么它的寬度為 1rem = 34.72px 。這樣就完美的和設計稿比例 一致了。
當然，在移動端，如果你使用了背景圖（比如雪碧圖），記得用同樣的方式調整背景圖的尺寸。