近幾年，響應(yīng)式網(wǎng)站越來(lái)越受到企業(yè)的青睞，不單單能適應(yīng)pc端網(wǎng)頁(yè)瀏覽，而且在手機(jī)等其他終端瀏覽也能提供舒適的界面，甚至能適應(yīng)智能手表屏幕界面。那么問(wèn)題來(lái)了，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師而言，網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)一會(huì)要兼容pc，一會(huì)兒要兼容平板，一會(huì)兒又要兼容手機(jī)，頁(yè)面設(shè)計(jì)稿尺寸呢？分辨率呢？css樣式呢？
然而，在前期網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)其實(shí)無(wú)需考慮太多響應(yīng)式網(wǎng)站的需求，實(shí)現(xiàn)響應(yīng)式效果主要是靠前端工程師。但是作為一個(gè)團(tuán)隊(duì)，網(wǎng)頁(yè)設(shè)計(jì)師也不能忽略響應(yīng)式。在設(shè)計(jì)網(wǎng)頁(yè)界面時(shí)確定一下標(biāo)準(zhǔn)尺寸其實(shí)也不是一件困難的事情，使用Photoshop CC高版本，可以在直接創(chuàng)建文件時(shí)選擇不同設(shè)備的尺寸參考，增加了設(shè)計(jì)的準(zhǔn)確性。
當(dāng)然，如果你不使用默認(rèn)的Photoshop尺寸，可以參看下面的表格進(jìn)行尺寸設(shè)置，表格中列出的尺寸是常用于網(wǎng)頁(yè)設(shè)計(jì)中的尺寸參考，并不是全部。響應(yīng)式設(shè)計(jì)對(duì)于初學(xué)者，甚至對(duì)于經(jīng)驗(yàn)不多的在職人員，也是一個(gè)很復(fù)雜，學(xué)起來(lái)相對(duì)不容易的知識(shí)。學(xué)習(xí)基本的響應(yīng)式規(guī)范容易，但是實(shí)際使用到項(xiàng)目中，就不是那么得心應(yīng)手了。這是一個(gè)過(guò)程，你如果學(xué)習(xí)下面的表格比較吃力，請(qǐng)不要操之過(guò)急，多自己去實(shí)踐，慢慢找出響應(yīng)式斷點(diǎn)的意義。下面的數(shù)據(jù)并不是固定使用在任意項(xiàng)目中，具體的響應(yīng)式斷點(diǎn)數(shù)值，還需要根據(jù)具體的項(xiàng)目設(shè)計(jì)方案，根據(jù)項(xiàng)目使用的前端開(kāi)發(fā)框架考慮。
好了，這篇文章的核心來(lái)了，設(shè)計(jì)是小事，真正的大事，在于前端開(kāi)發(fā)如何讓你的設(shè)計(jì)稿支持響應(yīng)式，這就需要根據(jù)互聯(lián)網(wǎng)的現(xiàn)狀，根據(jù)全球使用各種設(shè)備的情況，根據(jù)各種設(shè)備的尺寸分辨率來(lái)進(jìn)行判斷。有很多文章，很多時(shí)候，要完完全全按照標(biāo)準(zhǔn)兼容所有設(shè)備，工作量是非常龐大的，我相信每個(gè)開(kāi)發(fā)者都吃不消，況且開(kāi)發(fā)者還要考慮瀏覽器兼容性，更是難上加難。我自己總結(jié)的兩個(gè)表格，它們是我自己比較常用的參考值，同時(shí)也參考了一些W3C一些權(quán)威的數(shù)值，包含了尺寸，分辨率，CSS的媒體查詢(xún)代碼段等核心數(shù)值。我自己在寫(xiě)前端的時(shí)候，也不斷摸索如何即做到兼容，又滿(mǎn)足多種主流設(shè)備的屏幕尺寸，還要減輕前端開(kāi)發(fā)的工作量，提高前端開(kāi)發(fā)響應(yīng)式的效率。
你去Google或者百度一下，你可以找到很多響應(yīng)式的CSS代碼，復(fù)雜的有，簡(jiǎn)單的有，標(biāo)準(zhǔn)不一的也有，其實(shí)我也經(jīng)常去尋找資料學(xué)習(xí)，很是頭疼。但是最終你學(xué)到的知識(shí)，都要實(shí)踐到具體項(xiàng)目中，你才能知道什么最好用，什么最合適使用，我盡量本著下面的原則整理這些CSS代碼：
?
- 減輕前端開(kāi)發(fā)負(fù)擔(dān)
- 能最大限度兼容各主流設(shè)備和PC電腦?
- 代碼量盡量少，便于更清晰的思路?
- 兼容全球主流框架Bootstrap
?
這是很漫長(zhǎng)的工作，我積累了很久，實(shí)踐了很多，開(kāi)發(fā)過(guò)的支持響應(yīng)式的框架或者插件，所以在這里我做一個(gè)分享，特別是CSS代碼段，相信對(duì)每一個(gè)前端開(kāi)發(fā)者都會(huì)有所幫助，你不一定按照我的參考去做，但是你可以體會(huì)它們的意義。下面就看一看我常用的前端開(kāi)發(fā)時(shí)用到的響應(yīng)式代碼：
a) 常用于圖片流 @media all and (max-width： 1690px) { ... }
@media all and (max-width： 1280px) { ... }
@media all and (max-width： 980px) { ... }
@media all and (max-width： 736px) { ... }
@media all and (max-width： 480px) { ... }
b) 常用于稍微復(fù)雜的基本響應(yīng) @media all and (min-width：1200px){ ... }
@media all and (min-width： 960px) and (max-width： 1199px) { ... }
@media all and (min-width： 768px) and (max-width： 959px) { ... }
@media all and (min-width： 480px) and (max-width： 767px){ ... }
@media all and (max-width： 599px) { ... }
@media all and (max-width： 479px) { ... }
c) 基于Bootstrap 3.x 全球主流框架
@media all and (max-width： 991px) { ... }
@media all and (max-width： 768px) { ... }
@media all and (max-width： 480px) { ... }
d) 基于Bootstrap 4.x 全球主流框架
@media (min-width： 576px) { ... }
@media (min-width： 768px) { ... }
@media (min-width： 992px) { ... }
@media (min-width： 1200px) { ... }
e) 常用于Retina屏幕圖片適配(@2x)
@media(-webkit-min-device-pixel-ratio：1.5)，
(min--moz-device-pixel-ratio：1.5)，
(-o-min-device-pixel-ratio：3/2)，
(min-resolution：1.5dppx)
{ ... }
標(biāo)簽： 南昌網(wǎng)站建設(shè)公司/南昌做網(wǎng)站的公司/南昌微信小程序/南昌APP開(kāi)發(fā)/—斑驢互聯(lián)
贛公網(wǎng)安備 36010902000435號(hào)
