開發移動端頁面和響應式佈局

 開發移動端頁面和響應式佈局

響應式佈局

　　響應式佈局是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">
意思分別是：
　　一、initial-scale=1.0 ：初始縮放比例爲1.0（原始大小），這句代碼的目的是防止用戶 縮放的，
　　二、minimum-scale=1.0 ：網頁小的縮小比例爲1.0（原始大小），設置這句代碼的目的是爲 了放置某些程序（好比JS）無心中修改了網頁的縮小比例
　　三、maximum-scale=1.0 ：網頁大的放大比例爲1.0（原始大小），設置這句代碼的目的是爲 了放置某些程序（好比JS）無心中修改了網頁的放大比例
　　四、user-scalable=0 ：這句代碼纔是不容許用戶對網頁進行縮放

移動端元素的尺寸問題

尺寸隨着視口寬度的變化而變化
　　方法：
　　　　一、首先，寫一段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

　　　　二、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 。這樣就完美的和設計稿比例 一致了。 固然，在移動端，若是你使用了背景圖（好比雪碧圖），記得用一樣的方式調整背景圖的尺寸。