響應(yīng)式網(wǎng)頁設(shè)計(jì)|如何讓你的網(wǎng)頁完美適配各種屏幕

由于移動(dòng)設(shè)備（手機(jī)，平板電腦等）的流行，越來越多的網(wǎng)站開始使用響應(yīng)式設(shè)計(jì)來設(shè)計(jì)網(wǎng)站。其核心歸結(jié)為一句話就是，在不同設(shè)備上自動(dòng)適配不同的內(nèi)容（如下圖所示）。而我們?yōu)榱俗尵W(wǎng)站樣式能夠支持響應(yīng)式設(shè)計(jì)，其中最關(guān)鍵的因素就是 CSS 中的 media queries，media queries 允許我們定義在不同內(nèi)容和尺寸的設(shè)備上的樣式。

如何使用 Media Queries

上面我們說到 media queries 可以幫助我們定義不同尺寸設(shè)備上的內(nèi)容顯示，那么我們只需要在我們現(xiàn)有的樣式中增加針對(duì)特定內(nèi)容在特定設(shè)備或者尺寸的樣式即可，例如：

div.container { width: 100%; } @media screen only and (min-width: 480px) { div.container {width: 40%; } }

上面的例子中，我們的定義了只在屏幕（screen only）寬度最小值大于 480px 的時(shí)候?qū)挾葟?100% 變成 40%，而這個(gè)480px就是我們通常所說的 Break Point 。其中關(guān)于更多的 media queries 的屬性可以去參考下 Mozilla 的文檔。不過這個(gè)時(shí)候大家可能會(huì)有所疑問，這里的 480px 真的會(huì)預(yù)期一樣么？

Break Point 介紹

首先我們要知道，上面的例子中 media queries 針對(duì)的是內(nèi)容的寬度，而通常一個(gè)父級(jí)元素的寬度是由它包含的子類元素確定的，當(dāng)然我們也可以制定一個(gè)絕對(duì)值。當(dāng)元素的寬度超過屏幕的寬度時(shí)我們的內(nèi)容就會(huì)出現(xiàn)水平可滾動(dòng)的效果，類似下面這種效果：

同樣高度也會(huì)出現(xiàn)類似的情況，但是一般從網(wǎng)頁交互和用戶體驗(yàn)的角度來考慮，我們不會(huì)對(duì)特定的高度做限定，因?yàn)榫W(wǎng)頁的內(nèi)容是自上而下滾動(dòng)的，高度可以自由延展。這是可能會(huì)想那我定義個(gè) max-width:280px 不就好了嘛。是的，這確實(shí)解決了我們的問題，但是隨之而來的問題是如果用戶改變了他的瀏覽器的默認(rèn)字體大小怎么辦？在我的上一篇博客中「font-size 的常用長(zhǎng)度單位」我介紹了 CSS 中的幾種常見單位，其中的單位對(duì)于我們做響應(yīng)式設(shè)計(jì)中依然至關(guān)重要，那具體是怎么表現(xiàn)的呢？

在這個(gè)例子中當(dāng)寬度變化時(shí)，div 標(biāo)簽的背景透明度將發(fā)生改變，我們將從不同維度來看break point 的變化：

更改系統(tǒng)字體大小，縮放屏幕大小

不同瀏覽器

注：我使用的瀏覽器版本為 Chrome Version 55.0.2883.95 (64-bit) 和 Safari Version 10.0.2 (12602.3.12.0.1)

正常狀態(tài)

Chrome

我們可以看到在我拖拽的過程中，隨著寬度的縮小三個(gè)div標(biāo)簽的背景顏色同時(shí)變化，那是因?yàn)樵诓桓淖兿到y(tǒng)字體大小并且指定html { font-size: 62.5%; }的時(shí)候，在 Chrome 下480px = 30em = 30rem。

Safari

我們可以看到其顯示的效果和 Chrome 下卻有所不同，在寬度小于480px=30em時(shí)紅色塊和綠色塊顏色透明度減小，而當(dāng)寬度小于300px=30rem時(shí)藍(lán)色塊才開始變化。

更改字體大小

Chrome

Chrome 下可以通過設(shè)置>高級(jí)設(shè)置>網(wǎng)頁內(nèi)容 更改字體大小，我們將字體大小從Medium更改到Large，這時(shí) Chrome 的頁面內(nèi)容正常情況下1rem=20px，而當(dāng)加載html { font-size:62.5%; }后字體大小變成1rem=12.5px。

我們可以看到其中字體明顯變大了，這時(shí)候紅色色塊依然在寬度小于480px的時(shí)候顏色變化，而綠色和藍(lán)色色塊都同時(shí)在30rem=30em=600px時(shí)候顏色發(fā)生變化。

Safari

Safari 下通過點(diǎn)開視圖（View）菜單后按住Option鍵后點(diǎn)擊放大或者縮小頁面字體。這時(shí)我們將字體像 Chrome 下一樣增加字體大小后1rem=19.2px，而當(dāng)加載html { font-size:62.5%; }后字體大小變成1rem=12px。

文字大小和 Chrome 下一樣都明顯被放大了，而這時(shí)候紅色色塊也一樣在寬度小于480px的時(shí)候改變了顏色，而綠色色塊在寬度小于30em=12*1.6*30px=576px時(shí)候改變了顏色，藍(lán)色塊在寬度小于30rem=12*30px的時(shí)候顏色發(fā)生變化。

定義 Break Point

從上面的這幾個(gè)例子我們可以看到，就算在同一個(gè)設(shè)備不同的瀏覽器下不同的單位也會(huì)有不同的表現(xiàn)，雖然px在不同的瀏覽器甚至是不同的設(shè)備中的表現(xiàn)都是一樣的，但是當(dāng)用戶希望改變頁面的展示形式（字體大小）或者在一個(gè)不同的設(shè)備上時(shí)，他所希望的就是他瀏覽的網(wǎng)頁隨著這種改變而改變，所以我們不應(yīng)該選取px這種非響應(yīng)式的單位，而且不同瀏覽器下rem的定義不一致導(dǎo)致我們很難對(duì)最終的寬度很有個(gè)預(yù)測(cè)，因此建議選取em做為單位。如果我們?cè)谑褂?SASS這種預(yù)編譯 CSS 時(shí)，我們可以使用類似 sass-mq 這種工具庫去方便使用各種 media queries，如：

$mq-breakpoints: ( mobile: 20em, tablet: 46.24em, desktop: 61.25em, wide:81.25em ); @import 'mq'; .foo { @include mq($from: mobile, $until: tablet) {background: red; } @include mq($from: tablet) {background: green; } }

文章標(biāo)題：響應(yīng)式網(wǎng)頁設(shè)計(jì)|如何讓你的網(wǎng)頁完美適配各種屏幕
本文地址：http://muchs.cn/news/217317.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、定制網(wǎng)站、軟件開發(fā)、虛擬主機(jī)、品牌網(wǎng)站制作、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)