響應式布局的實現

syoya 發布于2019-08-30 10:55 / 1114人閱讀

摘要：響應式布局的概念響應式布局，即，在實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。框架實現響應式布局利用中柵格系統可以簡單實現響應式布局，這里就需要去理解一下啥是柵格系統代表在端上顯示在一行的個柵欄，也就是一半。

響應式布局的概念

響應式布局，即 Responsive design，在實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。

但需要注意的是，響應式布局的關鍵不僅僅在于布局，更多的是細節需要去考慮，譬如表單的響應式設計、圖片的響應式設計。

響應式布局的實現步驟

當創建一個響應式網站，或者將非響應式布局改成響應式的時候，首先要關注的是元素的布局。可以先完成非響應式布局，即頁面寬度是固定大小的，這樣應該是沒有任何難度的。在完成了非響應式后，可以通過添加媒體查詢（Media Query)和響應式代碼實現響應式特性。

一、設置meta標簽

在完成非響應式布局后，head中添加如下代碼。設置meta標簽來告訴瀏覽器，讓視口寬度等于設備寬度，而且需要禁止用戶縮放行為。

這里視口的設置需要注意的是，視口就是可見的屏幕尺寸；設置視口時只設置寬度，而不在乎高度，這是因為高度由內容自動撐開。

二、通過媒體查詢來設置樣式

媒體查詢（media query）是響應式設計的核心，它能夠和瀏覽器進行溝通，告訴瀏覽器頁面如何呈現。媒體查詢，它查詢的就是視口寬度，查詢用戶使用什么樣的設備來訪問的頁面，知道了設備尺寸就可以調用相應的響應式代碼。

那該如何寫入媒體查詢呢？

1、style標簽中的media屬性

譬如，在屏幕寬度不超過340的時候執行，背景色為紅色

可以復制以下代碼進行實踐，修改模擬設備的尺寸大小，顯示不同背景色


    
    
    
    響應式布局

2、在link標簽中設置media屬性

通過引入外部css，也可以實現上面代碼顯示的效果


    
    
    
    響應式布局

那在這個720-1080.css文件中只需要寫

body{ background: blue; }

其實，到這一步應該能明白一些響應式布局的理念，針對不同設備尺寸編寫不同樣式，通過媒體查詢來判斷出設備尺寸類型，調用相應的樣式。

3、外鏈css樣式中的@media屬性

以上內容都是將媒體查詢的語句嵌在HTML中，現在都講究模塊分離的思想，所以我們也需要將媒體查詢的語句寫在css中，實現HTML和CSS的分離。

那么在head中寫入

那在這個720-1080.css文件中則需要這樣寫

@media screen and (min-width:340px) and (max-width:720px) {
    body{
        background: blue;
    }
}

三種媒體查詢寫法介紹完了，你一定會很好奇，代碼中那些340px、720px都是如何確定。很簡單，一般的設備尺寸可以百度，推薦這個網站 http://screensiz.es/phone

說一些比較常見的分辨率節點，都是以比較關鍵的機型的分辨率作為參考來設置。比如iPhone4、5的寬度是320px，這個節點就非常重要，它是小屏幕手機的一個分界點，一般都會在媒體查詢的時候設置這個點。ipad mini的寬度是768，這代表著中型屏幕，所以第二個節點就設置為768 。

具體就可以這樣寫

/* iPad媒體查詢的寫法 */
@media only screen and (min-width:768px) and (max-width:1024px){
    ...
}

/* iPhone媒體查詢的寫法 */
@media only screen and (min-width:320px) and (max-width:767px){
    ...
}

如何使用媒體查詢設置網頁

這里所說的媒體查詢設置網頁不是上面所提到的實現步驟，在本文開始就有說過，響應式布局的關鍵在于布局，但現實情況中，存在PC端和手機端，你編寫的網頁是基于PC端的，去適配手機端，還是基于手機端，為了適配PC端，這是兩種情況，也就對應著兩種設計方案。對于媒體查詢來說，就是分為從大往小寫，還是從小往大寫，這涉及到其他的內容，就不贅述了，可以百度響應式布局中媒體查詢分辨率順序寫法。

需要注意的細節點

本文開始也說過，響應式布局的關鍵不僅僅在于布局，更多的是細節需要去考慮。也就是兼容性問題、字體尺寸單位、視口寬高的設置、圖片的處理、表單的處理...

1、兼容性問題

IE6、IE7、IE8是不支持媒體查詢的。
解決方案：css3-mediaqueries.js。引入此文件可以解決IE6-8無法實現響應式媒體查詢的尷尬。

2、字體尺寸單位

css3引入了新的單位叫做rem，rem是相對于根元素的，不要忘記重置根元素字體大小

html{font-size:100%;}

完成后，就可以定義響應式字體：

@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}

3、視口寬高的設置

不同設備，不同寬度。寬度不固定，可以使用百分比。

4、圖片的處理

帶寬是手機端必須要考慮的問題，如果將PC端上的大圖放在手機端，手機用戶請求圖片文件時，文件體積大，消耗流量多，請求事件長，這樣的用戶體驗一定不好。所以就得把圖片也處理成響應式的，根據終端類型尺寸分辨率來適配出合理的圖形。

有兩個解決方案，一個是看到有文章介紹的W3C的一個用于響應式圖形的草案：新定義標簽，因為是草案可以學習學習，這里就不贅述了，自行百度谷歌bing吧~ 另一個方案是圖片液態化。

在html頁面中的圖片，可以通過css樣式max-width來進行控制圖片的最大寬度

 #wrap img{
    max-width:100%;
    height:auto;
}

id為wrap內的圖片會根據wrap的寬度改變已達到等寬擴充，height為auto的設置是為了保證圖片原始的高寬比例，以至于圖片不會失真。

除了img標簽的圖片外我們經常會遇到背景圖片，譬如在id為logo 的 i 標簽中設置背景圖片

#log{
    display:block;
    width:100%;
    height:40px;
    text-indent:55rem;
    background-img:url(logo.png);
    background-repeat:no-repeat;
    background-size:100% 100%;
}

其中關鍵background-size可以設置的值有，cover：等比擴展圖片來填滿元素；contain：等比縮小圖片來適應元素的尺寸。

需要注意的細節還有很多，繼續學習繼續積累。

Bootstrap框架實現響應式布局

利用Bootstrap中柵格系統可以簡單實現響應式布局，這里就需要去理解一下啥是柵格系統

col-md-6 代表在PC端上顯示在一行的6個柵欄，也就是一半。

col-sm-6 代表在平板上也顯示div占當前行的一半。

col-xs-12 代表在手機端顯示為當前行的百分之百填充。

確實Bootstrap的實現很簡單，但是面試過程中，會有很多面試官傾向于詢問自己該如何實現響應式布局，所以啊，以上的內容還是需要多加學習理解，框架只是一個工具。當然了，除了以上的方法，還有其他的響應式布局實現方式。

云服務器 GPU云服務器響應式布局 asp如何響應式布局 html響應式導布局 android布局的實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114657.html

重溫"什么是響應式網頁設計？響應式布局的實現原理"

摘要：概念響應式網頁設計最初是由提出的一個概念為什么一定要為每個用戶群各自打造一套設計和開發方案設計應該做到根據不同設備環境自動響應及調整。預計到年，移動互聯網的數據流量將超越端的流量。概念響應式網頁設計最初是由 Ethan Marcotte 提出的一個概念：為什么一定要為每個用戶群各自打造一套設計和開發方案？Web設計應該做到根據不同設備環境自動響應及調整。當然響應式Web設計不僅僅是...

Nekron 2019-08-29 12:28 評論0 收藏0
重溫"什么是響應式網頁設計？響應式布局的實現原理"

摘要：概念響應式網頁設計最初是由提出的一個概念為什么一定要為每個用戶群各自打造一套設計和開發方案設計應該做到根據不同設備環境自動響應及調整。預計到年，移動互聯網的數據流量將超越端的流量。概念響應式網頁設計最初是由 Ethan Marcotte 提出的一個概念：為什么一定要為每個用戶群各自打造一套設計和開發方案？Web設計應該做到根據不同設備環境自動響應及調整。當然響應式Web設計不僅僅是...

Joyven 2019-08-01 16:43 評論0 收藏0
CSS Grid響應式網頁布局 - W3Schools視頻03

摘要：繼續響應式網頁布局的實現，今日講的是方案。就是為二維布局設計的，最適合用來做網頁布局。其中是最小寬度單位，等于六個等于三個等于兩個而則等于五個。繼續W3Schools響應式網頁布局的實現，今日講的是CSS Grid方案。CSS Grid就是為二維布局設計的，最適合用來做網頁布局。目前主流的瀏覽器都已經支持CSS Grid，除非你很確定你的用戶常使用較舊的瀏覽器，不然的話，建議使用CS...

piapia 2019-08-23 15:57 評論0 收藏0
CSS Grid響應式網頁布局 - W3Schools視頻03

摘要：繼續響應式網頁布局的實現，今日講的是方案。就是為二維布局設計的，最適合用來做網頁布局。其中是最小寬度單位，等于六個等于三個等于兩個而則等于五個。繼續W3Schools響應式網頁布局的實現，今日講的是CSS Grid方案。CSS Grid就是為二維布局設計的，最適合用來做網頁布局。目前主流的瀏覽器都已經支持CSS Grid，除非你很確定你的用戶常使用較舊的瀏覽器，不然的話，建議使用CS...

leejan97 2019-08-30 15:56 評論0 收藏0