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

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

響應式布局

響應式布局是ethan marcotte在2023年5月份提出的乙個概念，簡而言之，就是乙個**能夠相容多個終端，而不是為每個終端做乙個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。

由於響應式布局要針對不同的視口尺寸，對樣式作出更多的修改，因此並不像流式布局那樣讓寬度自動適應那麼簡單。

實現響應式布局最核心的技術就是使用**查詢（media selector）。

**查詢是css3引入的概念，是指針對不同的裝置、不同的視口尺寸，使用不同的樣式**。

**查詢的書寫格式如下：

@media screen and (min‐width:1200px) 
@media screen and (min‐width:992px) and (max‐width:1200px) 
@media screen and (max‐width: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
}

開發移動端頁面

移動端獨有的一些特性，需要我們在開發時特別關注。這些特性包括：

1. 移動端的視口寬度問題

2. 移動端誤觸造成的縮放問題

3. 移動端元素的尺寸問題

移動端的視口寬度問題

關鍵字 device-width ，該關鍵是讀取當前移動裝置的寬度.

這樣就解決了移動端視口寬度和自身寬度不一致的問題。

移動端誤觸造成的縮放問題

當使用者用手指在移動端滑動網頁的時候，手機往往提供下面的功能：

快速雙擊，可放大頁面

雙指收放，可放大縮小頁面

禁止使用者對網頁進行縮放的方法：

意思分別是：

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) 
var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
var timer = null;
win.addeventlistener(evt, function() , false);
win.addeventlistener("pageshow", function(e) 
}, 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 。這樣就完美的和設計稿比例一致了。

當然，在移動端，如果你使用了背景圖（比如雪碧圖），記得用同樣的方式調整背景圖的尺寸。

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

移動端響應式布局

移動端響應式布局基礎

移動端與響應式布局

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

移動端響應式布局

移動端響應式布局基礎

移動端與響應式布局

相關推薦