響應(yīng)式布局產(chǎn)品用戶(hù)體驗(yàn)這么差，你老板知道嗎？

時(shí)間：2023-03-03 05:39:01 | 來(lái)源：建站知識(shí)

時(shí)間：2023-03-03 05:39:01 來(lái)源：建站知識(shí)

“響應(yīng)式”這個(gè)詞現(xiàn)在越來(lái)越流行了，它的出現(xiàn)，對(duì)于WEB前端的設(shè)計(jì)還是code，起到了很大的推動(dòng)作用。

隨著網(wǎng)民生活水平的提高，電腦和手機(jī)屏幕越來(lái)越大，對(duì)于產(chǎn)品的用戶(hù)體驗(yàn)會(huì)要求越來(lái)越多，這必然導(dǎo)致行業(yè)內(nèi)各公司的產(chǎn)品競(jìng)爭(zhēng)越來(lái)越烈。

如果你經(jīng)常關(guān)注到一些門(mén)戶(hù)網(wǎng)站，比如淘寶、樂(lè)視等， 發(fā)現(xiàn)他們現(xiàn)在的網(wǎng)站布局不同分辨率下有著不同的效果，這種技術(shù)也是以后的一種趨向了，不僅僅是在PC端，而在我們的移動(dòng)端，也是如此?，F(xiàn)在人手基本一部智能機(jī)器，分辨率也是很多種，如何在不同分辨率下，給用戶(hù)帶去更好的體驗(yàn)，作為前端人員應(yīng)該多花點(diǎn)心思了。在項(xiàng)目過(guò)程中，我們經(jīng)常會(huì)被產(chǎn)品以及測(cè)試人員問(wèn)到 類(lèi)似下面的問(wèn)題：

> 為什么用三星S4和蘋(píng)果4/5錯(cuò)位、換行，圖片質(zhì)量太差?

> 為什么我用筆記本和臺(tái)式電腦上瀏覽，效果不一樣?

> 能不能保證在不同分辨率下內(nèi)容都能充滿(mǎn)屏幕啊?

.....

針對(duì)以上問(wèn)題，我們引入Media Queries來(lái)解決。你可以針對(duì)不同media類(lèi)型設(shè)置表達(dá)式，根據(jù)不同的條件設(shè)置不同的樣式。例如你可以為大屏幕設(shè)置一種樣式，為mobile設(shè)置另外一種 樣式。這個(gè)功能相當(dāng)強(qiáng)大，你可以不修改頁(yè)面內(nèi)容的情況下，為不同設(shè)備提供不同的樣式效果。

下面讓我們?cè)敿?xì)講下如何應(yīng)用Media Queries吧!

Media Queries

打開(kāi)Demo頁(yè)面，調(diào)整瀏覽器的大小，查看頁(yè)面布局變化情況。

Max Width

當(dāng)頁(yè)面視圖區(qū)域小于600px寬度的時(shí)候，css會(huì)被使用到。

@media screen and (max-width: 600px) {

.class {

background: #ccc;

}}

你也可以使用下面的方式，在頁(yè)面的中引用外部css文件。

Min Width

當(dāng)視圖區(qū)域大于900px寬度的時(shí)候，css會(huì)被使用到。

@media screen and (min-width: 900px) {

.class {

background: #666;

}}

多個(gè) Media Queries

你可以把多個(gè)media queries組合在一起，當(dāng)視圖區(qū)域?qū)挾仍?00px到900px之間的時(shí)候，會(huì)使用下面的css。

@media screen and (min-width: 600px) and (max-width: 900px) {

.class {

background: #333;

}}

設(shè)備Width

下面的css會(huì)在 max-device-width為480px的時(shí)候使用，例如iphone。

注意：max-device-width指的是設(shè)備實(shí)際分辨率，max-width指的是可是區(qū)域尺寸。

@media screen and (max-device-width: 480px) {

.class {

background: #000;

}}

針對(duì) iPhone 4

下面的時(shí)針對(duì)iphone4的css。

針對(duì) iPad

你也可以在ipad上檢查定位(portrait 或者 landscapse)。

針對(duì)Internet Explorer的Media Queries

因?yàn)閕e8以及之前版本的ie瀏覽器不支持media query，你需要使用JavaScript的hack計(jì)較解決問(wèn)題。下面是一些解決方案：

CSS Tricks - 使用jquery判斷瀏覽器尺寸

The Man in Blue - 使用Javascript

jQuery Media Queries 插件

示例站點(diǎn)

你可以使用支持media query的瀏覽器訪(fǎng)問(wèn)下面的站點(diǎn)，例如：Firefox, Chrome, 和 Safari。可以查看他們針對(duì)瀏覽器寬度所做的布局響應(yīng)。

1、新版淘寶首頁(yè)

淘寶首頁(yè)現(xiàn)在中間部分布局是：左中右，其中左邊導(dǎo)航是固定寬度的，中間和右邊使用了“media query”使得在不同分辨率下采用響應(yīng)式布局，如下：

默認(rèn)尺寸[1190px]：

中等尺寸[1009px]：

小尺寸[740px]：

2、Hicksdesign

大尺寸: 3 列sidebar

小尺寸: 2 列sidebar (中間的sidebar跑到了左邊)

更小尺寸: 1 列sidebar (最右邊的跑到了logo下面)

最小尺寸: 沒(méi)有sidebar (logo 和 右側(cè)的sidebar 上移，其他sidebar 下移)

3、Colly

頁(yè)面布局根據(jù)瀏覽器的可視區(qū)域，在1列、2列和4列之間切換。

4、A List Apart

大尺寸：導(dǎo)航在上不部, 1行圖片

中等尺寸：導(dǎo)航在左邊, 3列圖片

小尺寸：導(dǎo)航在上部，logo沒(méi)有背景圖片, 3列圖片

5、Tee Gallery

他和之前的Colly有點(diǎn)像，不同點(diǎn)在于它的圖片會(huì)根據(jù)頁(yè)面布局的變化，進(jìn)行縮放。這里使用的技巧就是，對(duì)圖片使用百分比寬度，代替固定寬度，例如：width=100%。

總而言之，Media Query目前在移動(dòng)端應(yīng)用很多，雖然在PC端有些局限性，但以后是一個(gè)趨向，我們應(yīng)該更多的去研究它，目的是讓我們的項(xiàng)目擁有更好的用戶(hù)體驗(yàn)。

我們需要注意到，針對(duì)mobile做了一個(gè)css，并不意味著我們的站點(diǎn)對(duì)mobile設(shè)備就是優(yōu)化的。對(duì)mobile設(shè)備進(jìn)行優(yōu)化，網(wǎng)站圖片和html代碼同樣需要縮小尺寸，這樣才有益于加載。media query做到的只是設(shè)計(jì)展現(xiàn)，而不是優(yōu)化操作。

最后只想說(shuō)，一個(gè)好的產(chǎn)品，必須具備好的用戶(hù)體驗(yàn)。更多精彩敬請(qǐng)關(guān)注Web前端之家:www.jiangweishan.com吧!