內容詳情

WebDesign數據庫:最新2017響應式設計斷點數值與代碼段參考

作者: 廣西桂林日b軟件有限公司 整理   發布時間:2017-07-19 18:59:48

www.c945.com.jpg

相信很多網頁設計師,對響應式設計還存在很多迷惑。設計稿尺寸?分辨率?CSS樣式?等等,這是很正常的,網頁發展迅速,電子設備層出不窮,造成了設計工作量大增。一會兒你要兼容PC,一會兒要兼容安卓,一會兒要兼容蘋果,一會要兼容平板,一會要兼容智能手表,感覺人都要崩潰了。然而,事實確實如此,單純的網頁界麵設計,日b無需考慮太過複雜的響應式,因為響應式靠的還是前端工程師嘛!但是日b可不能忽略這個,如果你是一個團隊,弄不好你會被前端開發人員砍死,如果前端開發人員是個妹紙,說不定你會把人家弄哭。之前我也有一套免費的公開課,詳細講解了響應式和尺寸、分辨率等問題,但是還有很多不完善和不準確,又經過了一年多的打磨,我這裏又重新整理歸納了更好的數據和使用技巧。

好了,廢話不多說,設計網頁界麵,定下一個標準尺寸,包括響應式尺寸,其實很容易,用PhotoshopCC高版本,可以在直接創建文件時選擇不同設備的尺寸參考,增加了設計的準確性。

當然,如果你不使用默認的Photoshop尺寸,可以參看下麵的表格進行尺寸設置,表格中列出的尺寸是常用於網頁設計中的尺寸參考,並不是全部。響應式設計對於初學者,甚至對於經驗不多的在職人員,也是一個很複雜,學起來相對不容易的知識。學習基本的響應式規範容易,但是實際使用到項目中,就不是那麽得心應手了。這是一個過程,你如果學習下麵的表格比較吃力,請不要操之過急,多自己去實踐,慢慢找出響應式斷點的意義。下麵的數據並不是固定使用在任意項目中,具體的響應式斷點數值,還需要根據具體的項目設計方案,根據項目使用的前端開發框架考慮。

好了,這篇文章的核心來了,設計是小事,真正的大事,在於前端開發如何讓你的設計稿支持響應式,這就需要根據互聯網的現狀,根據全球使用各種設備的情況,根據各種設備的尺寸分辨率來進行判斷。有很多文章,很多時候,要完完全全按照標準兼容所有設備,工作量是非常龐大的,我相信每個開發者都吃不消,況且開發者還要考慮瀏覽器兼容性,更是難上加難。我自己總結的兩個表格,它們是我自己比較常用的參考值,同時也參考了一些W3C一些權威的數值,包含了尺寸,分辨率,CSS的媒體查詢代碼段等核心數值。我自己在寫前端的時候,也不斷摸索如何即做到兼容,又滿足多種主流設備的屏幕尺寸,還要減輕前端開發的工作量,提高前端開發響應式的效率。

你去Google或者百度一下,你可以找到很多響應式的CSS代碼,複雜的有,簡單的有,標準不一的也有,其實我也經常去尋找資料學習,很是頭疼。但是最終你學到的知識,都要實踐到具體項目中,你才能知道什麽最好用,什麽最合適使用,我盡量本著下麵的原則整理這些CSS代碼:

  • -減輕前端開發負擔

  • - 能最大限度兼容各主流設備和PC電腦

  • - 代碼量盡量少,便於更清晰的思路

  • - 兼容全球主流框架Bootstrap

  • 這是很漫長的工作,我積累了很久,實踐了很多,開發過的支持響應式的框架或者插件,所以在這裏我做一個分享,特別是CSS代碼段,相信對每一個前端開發者都會有所幫助,你不一定按照我的參考去做,但是你可以體會它們的意義。下麵就看一看我常用的前端開發時用到的響應式代碼:

    a)常用於圖片流

    @mediaalland(max-width:1690px){...}

    @mediaalland(max-width:1280px){...}

    @mediaalland(max-width:980px){...}

    @mediaalland(max-width:736px){...}

    @mediaalland(max-width:480px){...}

    b)常用於稍微複雜的基本響應

    @mediaalland(min-width:1200px){...}

    @mediaalland(min-width:960px)and(max-width:1199px){...}

    @mediaalland(min-width:768px)and(max-width:959px){...}

    @mediaalland(min-width:480px)and(max-width:767px){...}

    @mediaalland(max-width:599px){...}

    @mediaalland(max-width:479px){...}

    c)基於Bootstrap3.x全球主流框架

    @mediaalland(max-width:991px){...}

    @mediaalland(max-width:768px){...}

    @mediaalland(max-width:480px){...}

    d)基於Bootstrap4.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)

    {...}