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