面試之響應式佈局（轉載）

時間 2019-12-17

原文原文鏈接

參考：維基百科， CSS3 @media 查詢， Bootstrap中文官網，鄙視IE， 2014年5個最流行前端框架對比，自適應網頁設計-阮一峯，響應式網頁設計，響應式佈局-百度百科，響應式網站設計原則，響應式佈局這件小事，響應式 Web 設計新原則，什麼是響應式佈局設計？，自適應與響應式的區別， Foundation中文網

響應式佈局是什麼意思？

響應式佈局能夠根據不一樣的瀏覽設備（PC端，平板，智能手機等）呈現不一樣的網頁佈局，同時減小縮放、平移和滾動。

適應移動端的大趨勢，提升用戶體驗，減小開發成本。

爲何要使用響應式佈局？

主要是使網頁適用於用於移動端設備，屏幕分辨率是出現的最大的兼容性問題。

能夠爲不一樣的設備提供不一樣的網站，也就是同一網站作普通PC端和移動端兩種頁面。不管是前期的開發仍是後期的維護改版，都很是的麻煩。

響應式佈局的缺點？

兼容代碼多，工做量大

設計原則？適合什麼樣的項目？

向下兼容，移動優先。

對於很是複雜的網頁佈局，不適合進行網頁自適應的佈局，緣由之一是實現成本過高，其次就是複雜頁面（例如容商網首頁，中國企業集羣首頁等）也不適合移動端的瀏覽。

其餘的響應式佈局的框架？

Prue框架是Yahoo的一款輕量級的框架，兼容IE7以上，性能好，可是中文文檔少，不利於團隊開發，沒有組件。

Foundation by ZURB，次於Bootstrap，重量級，362K大小

Bootstrap優點 ？

學習成本低

是目前最流行的自適應框架

性能很是好，最基礎的文件大小隻有149.1k

bootstrap.min.js 35.1k

bootstrap.min.css 114k

中文文檔完善，還有全套的視頻教程

有許多組件能夠選擇，如 Bootstrap switch，Sco.js，Flat UI等，便於快速開發

兼容性

Chrome Firefox Internet Explorer Opera Safari

Android 支持支持 N/A 不支持 N/A

iOS 支持 N/A 不支持支持

Mac OS X 支持支持支持支持

Windows 支持支持支持支持不支持

	Chrome	Firefox	Internet Explorer	Opera	Safari
Android	支持	支持	N/A	不支持	N/A
iOS	支持	N/A	不支持	支持
Mac OS X	支持	支持	支持	支持
Windows	支持	支持	支持	支持	不支持

windows平臺，支持IE8，若是不用框架則須要IE9以上支持,並且經過插件Bsie（鄙視IE）能夠兼容IE6。

響應式佈局實例css

響應式頁面實例地址html

http://xys.laiwanapp.com/bootstrap-1/

http://xys.laiwanapp.com/bootstrap-2/

http://xys.laiwanapp.com/bootstrap-3/

兼容性問題（分辨率分解-*~768手機,768~992平板,992~1200普通PC,1200~*大屏幕PC）

	chrome18	firefox11（firefox3.6）	IE7（較少用戶）	IE8（主流）	IE9（表明最新版本）	IE6
實例1-微博	無	無（無圓角）	無	無	無	崩潰
實例2-相冊	圓角錯誤	無圓角（無圓角，不支持背景尺寸屬性）	無	無	無	崩潰
實例3-博客	圓角錯誤	無圓角，進度條無動畫（無圓角，進度條無動畫）	無	無	無	崩潰
其它

說明

chrome18和firefox都是舊版本的，用戶很是少

不支持背景屬性能夠用position和z-index屬性解決

IE6崩潰可使用針對Bootstrap的插件Bsie解決大部分，但若是不要求對IE6支持，不建議使用，影響性能

下圖分別是無圓角，正常圓角，圓角錯誤，圓角是CSS3屬性，因此會出現兼容問題，但IE7以上都支持，已經很好了（w3school說IE9以上才支持，說明使用了css hack）

且官方文檔裏說明說明了這一點：http://v3.bootcss.com/css/#images-shapes

總結：支持主流瀏覽器，舊版本的瀏覽器出現的兼容性問題不大。

其它須要改進

移動端測試

兼容性問題（分辨率分解-

1. *~768手機，1欄

2. 768~992平板 ，2欄

3. 992~1200普通PC ，2欄

4. 1200~*大屏幕PC ，3欄

）

分辨率dpi	ppi	型號	豎	橫
2560x1536（手機）	546	MX4 pro	1欄	1欄
720x1280（手機）		華爲榮耀3c	1欄	1欄
1200x1920（手機平板）		華爲 x1 7.0	1欄	2欄
800x1280（平板）		toshiba wt8a(win 8.1系統)	2欄	3欄
1366x768		Acer win8.1	-	-

原理

2.怎樣實現響應式佈局

如今響應式佈局用得比較大衆的應該是Bootstrap，可是我並不打算使用。緣由很簡單，我對Bootstrap不熟悉不瞭解。而後我簡單的看了下Bootstrap是怎麼實現的響應式佈局。原理很簡單，就是使用到了CSS3中的media。media何方神聖？能夠用來吃嗎？它能夠針對不一樣的媒體類型定義不一樣的樣式，也能夠針對不一樣的屏幕尺寸設置不一樣的樣式。且當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面。既然如此，響應式何愁。前端

3.media的簡單使用

Max Width：在可視區域的寬度小於 600px 的時候被應用。css3

@media screen and (max-width: 600px) {
  .class {
    background: #0094ff;
  }
}

Min Width：在可視區域的寬度大於600px 的時候被應用。web

@media screen and (min-width: 600px) {
  .class {
    background: red;
  }
}

簡單？對，就是如此簡單。您還能夠在600到900直接的啓用。chrome

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #0094ff;
  }
}

固然，您還能夠，放入單獨文件。爽歪歪了吧。bootstrap

<link rel="stylesheet" media="screen and (max-width: 600px)" href="max600.css" />

好了，你已經知道得太多了。實現一個首頁的響應式基本上已經夠用了。segmentfault

默認樣式顯示移動端：windows

.blog_body_e.col-xs-12 .a_blog_user {
    display: inline-block;
}

.blog_body_e, .blog_body_b {
    padding-left: 10px;
    padding-right: 10px;
}

若是是PC端：（默認大於992px就算是PC端固然，你也能夠自定義）瀏覽器

@media (min-width: 992px) {
    .blog_body_e.col-md-3 .a_blog_user {
        display: block;
    }

    .blog_body .blog_body_b {
        width: 80%;
        float: left;
    }

    .blog_body .blog_body_e {
        width: 20%;
        float: left;
        box-sizing: border-box;
        padding-right: 25px;
    }

    .blog_body_e, .blog_body_b {
        padding-left: 20px;
        padding-right: 20px;
    }
}

咱們看分佈看看效果圖