相信很多網(wǎng)頁(yè)設(shè)計(jì)師人芽，對(duì)響應(yīng)式設(shè)計(jì)還存在很多迷惑。設(shè)計(jì)稿尺寸绩脆？分辨率萤厅？CSS樣式？等等靴迫，這是很正常的惕味，網(wǎng)頁(yè)發(fā)展迅速，電子設(shè)備層出不窮玉锌，造成了設(shè)計(jì)工作量大增名挥。一會(huì)兒你要兼容PC，一會(huì)兒要兼容安卓主守，一會(huì)兒要兼容蘋(píng)果禀倔，一會(huì)要兼容平板，一會(huì)要兼容智能手表参淫，感覺(jué)人都要崩潰了救湖。然而，事實(shí)確實(shí)如此涎才，單純的網(wǎng)頁(yè)界面設(shè)計(jì)鞋既，我們無(wú)需考慮太過(guò)復(fù)雜的響應(yīng)式，因?yàn)轫憫?yīng)式靠的還是前端工程師嘛耍铜！但是我們可不能忽略這個(gè)邑闺，如果你是一個(gè)團(tuán)隊(duì)，弄不好你會(huì)被前端開(kāi)發(fā)人員砍死棕兼，如果前端開(kāi)發(fā)人員是個(gè)妹紙陡舅，說(shuō)不定你會(huì)把人家弄哭。之前我也有一套免費(fèi)的公開(kāi)課伴挚，詳細(xì)講解了響應(yīng)式和尺寸蹭沛、分辨率等問(wèn)題臂寝，但是還有很多不完善和不準(zhǔn)確，又經(jīng)過(guò)了一年多的打磨摊灭，我這里又重新整理歸納了更好的數(shù)據(jù)和使用技巧。
好了败徊，廢話不多說(shuō)帚呼，設(shè)計(jì)網(wǎng)頁(yè)界面，定下一個(gè)標(biāo)準(zhǔn)尺寸皱蹦，包括響應(yīng)式尺寸煤杀，其實(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的媒體查詢代碼段等核心數(shù)值墙牌。我自己在寫(xiě)前端的時(shí)候，也不斷摸索如何即做到兼容宜鸯，又滿足多種主流設(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)式代碼(當(dāng)網(wǎng)站使用或者未使用前端框架時(shí)用于自定義樣式表的對(duì)照參考)：
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 all and (max-width: 1199px) { ... }
@media all and (max-width: 991px) { ... }
@media all and (max-width: 768px) { ... }
@media all and (max-width: 575px) { ... }
e) 基于Material Design Lite (MDL) 材料設(shè)計(jì)框架
@media all and (max-width: 1024px) { ... }
@media all and (max-width: 839px) { ... }
@media all and (max-width: 480px) { ... }
f) 常用于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){ ... }
今天的分享就到這里踢关，如果你喜歡我的分享伞鲫，以后多多關(guān)注我的博客，我會(huì)不定時(shí)的總結(jié)分享一些干貨签舞。希望對(duì)你有幫助：）
本文章同步發(fā)表于個(gè)人博客
