国产乱码一区二区三区四区_国产精品免费不卡_国产精品一区精品国产自在_亚洲国产精品97久久无色_一本之道无人区_俄罗斯胖老太牲交

       近幾年，響應式網(wǎng)站越來越受到企業(yè)的青睞，不單單能適應pc端網(wǎng)頁瀏覽，而且在手機等其他終端瀏覽也能提供舒適的界面，甚至能適應智能手表屏幕界面。那么問題來了，對于網(wǎng)頁設計師而言，網(wǎng)頁頁面設計一會要兼容pc，一會兒要兼容平板，一會兒又要兼容手機，頁面設計稿尺寸呢？分辨率呢？css樣式呢？
       然而，在前期網(wǎng)頁頁面設計其實無需考慮太多響應式網(wǎng)站的需求，實現(xiàn)響應式效果主要是靠前端工程師。但是作為一個團隊，網(wǎng)頁設計師也不能忽略響應式。在設計網(wǎng)頁界面時確定一下標準尺寸其實也不是一件困難的事情，使用Photoshop CC高版本，可以在直接創(chuàng)建文件時選擇不同設備的尺寸參考，增加了設計的準確性。

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

       好了，這篇文章的核心來了，設計是小事，真正的大事，在于前端開發(fā)如何讓你的設計稿支持響應式，這就需要根據(jù)互聯(lián)網(wǎng)的現(xiàn)狀，根據(jù)全球使用各種設備的情況，根據(jù)各種設備的尺寸分辨率來進行判斷。有很多文章，很多時候，要完完全全按照標準兼容所有設備，工作量是非常龐大的，我相信每個開發(fā)者都吃不消，況且開發(fā)者還要考慮瀏覽器兼容性，更是難上加難。我自己總結的兩個表格，它們是我自己比較常用的參考值，同時也參考了一些W3C一些權威的數(shù)值，包含了尺寸，分辨率，CSS的媒體查詢代碼段等核心數(shù)值。我自己在寫前端的時候，也不斷摸索如何即做到兼容，又滿足多種主流設備的屏幕尺寸，還要減輕前端開發(fā)的工作量，提高前端開發(fā)響應式的效率。
       你去Google或者百度一下，你可以找到很多響應式的CSS代碼，復雜的有，簡單的有，標準不一的也有，其實我也經(jīng)常去尋找資料學習，很是頭疼。但是最終你學到的知識，都要實踐到具體項目中，你才能知道什么最好用，什么最合適使用，我盡量本著下面的原則整理這些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)
{ ... }