什么是web響應(yīng)式布局

發(fā)布時間：2021-09-16 17:35:19 來源：億速云閱讀：145 作者：柒染欄目：移動開發(fā)

什么是web響應(yīng)式布局，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

響應(yīng)式布局的開發(fā)基礎(chǔ)知識

本章主要分為以下幾個部分

•正確理解響應(yīng)式設(shè)計
•響應(yīng)式設(shè)計的步驟
•響應(yīng)式設(shè)計需要注意的問題
•響應(yīng)式網(wǎng)頁布局實現(xiàn)原理

第一：正確理解響應(yīng)式布局

響應(yīng)式網(wǎng)頁設(shè)計就是一個網(wǎng)站能夠兼容多個終端-而不是為每個終端做一個特定的版本。打個比方來說：現(xiàn)在社會有很多響應(yīng)產(chǎn)品，例如折疊沙發(fā)，折疊床等等，當我們需要把沙發(fā)放到一個角落的時候，此刻沙發(fā)就好比div吧，而角落里的某個地方就好比父元素，由于父元素空間的改變，我們不得不調(diào)整div,讓它能夠依然放在角落里。在項目中你會遇到不同的終端，由于終端分辨率不同，所以你要想讓用戶體驗更好，就必要讓你的頁面能夠兼容多個終端。

第二：響應(yīng)式設(shè)計的步驟

了解了什么是響應(yīng)式，那么接下來我們就要說說響應(yīng)式設(shè)計的步驟，有人這時候會說“博主，你傻啊，響應(yīng)式設(shè)計的步驟不就是1.編寫非響應(yīng)式代碼、2.加工成響應(yīng)式代碼、3.響應(yīng)式細節(jié)處理、4.完成響應(yīng)式開發(fā)嗎？”博主菊花一震原來高手在民間啊，微微一硬表示敬重，我去，說錯了是微微一笑，大家不要誤會啊。

言歸正傳，博主因為是刨根問底攔不組的，所以在此就往響應(yīng)式設(shè)計的祖墳上刨，深入了解下這四個步驟。

1.布局及設(shè)置meta標簽

當創(chuàng)建一個響應(yīng)式網(wǎng)站，或者非響應(yīng)式網(wǎng)站變成響應(yīng)式的時候，首先要關(guān)注元素的布局。我在創(chuàng)建響應(yīng)式布局的時候習慣先寫非響應(yīng)式布局，頁面固定寬度大小，我覺得這個對在座的各位沒有任何難度。如果完成了非響應(yīng)式那么我在去添加媒體查詢（Media Query)和響應(yīng)式代碼。這種操作更容易實現(xiàn)響應(yīng)式特性。

當你完成當你已經(jīng)完成了無響應(yīng)的網(wǎng)站，做的第一件事是在你的 HTML 頁面，粘貼下面的代碼到和標簽之間。這將設(shè)置屏幕按1：1的尺寸顯示，在 iPhone 和其他智能手機的瀏覽器提供網(wǎng)站全視圖瀏覽，并禁止用戶縮放頁面。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
user-scalable屬性能夠解決ipad切換橫屏之后觸摸才能回到具體尺寸的問題。

2.通過媒體查詢來設(shè)置樣式media query

media query 是響應(yīng)式設(shè)計的核心，它能夠和瀏覽器進行溝通，告訴瀏覽器頁面如何呈現(xiàn)，假如一個終端的分辨率小于980px，那么可以這樣寫

@media screen and (max-width:980px){
#head { … }
#content { … }
#footer { … }
}這里面的樣式會覆蓋掉之前所定義的樣式。

3.設(shè)置多種視圖寬度

假如我們要兼容ipad和iphone視圖，我們可以這樣設(shè)置：

/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){}
/**iphone**/
@media only screen and (width:320px)and (width:768px){}

3.字體設(shè)置

到目前為止，開發(fā)人員用到的字體單位大部分都是像素，雖然像素在普通網(wǎng)站上是Ok的，但是我們?nèi)匀恍枰憫?yīng)式字體。一個響應(yīng)式的字體應(yīng)關(guān)聯(lián)它的父容器的寬度，這樣才能適應(yīng)客戶端屏幕。

css3引入了新的單位叫做rem,和em類似但對于Html元素，rem更方便使用。

rem是相對于根元素的，不要忘記重置根元素字體大?。?/p>

html{font-size:100%;}
完成后，你可以定義響應(yīng)式字體：
@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;}}
不理解rem的童鞋，在這里給大家推薦一篇寫的不錯的博客(http://www.cnblogs.com/YYvam1288/p/5123272.html)

4.響應(yīng)式設(shè)計需要注意的問題

1.寬度不固定，可以使用百分比

#head{width:100%;}
#content{width:50%;}

2.圖片處理

在這里我給大家一把鑰匙,有人會說，博主，能不能別裝逼？圖片處理還有啥鑰匙，你以為是開門啊，博主，醒醒吧

哎喲，我這暴脾氣，我說的鑰匙不是真的鑰匙，而是指圖片處理的萬能方法，是什么呢？就是圖片液態(tài)化。接著會有人問：“什么是圖片液態(tài)化”呢？這個問題問的很好，給你打99分，多給你一分怕你驕傲，大家都知道水無形能適合很多容器，那么假如我們把圖片當做水是不是就可以實現(xiàn)圖片自適應(yīng)問題了呢？

在html頁面中的圖片，比如文章里插入的圖片我們都可以通過css樣式max-width來進行控制圖片的最大寬度，如：

#wrap img{
max-width:100%;
height:auto;
}
如此設(shè)置后ID為wrap內(nèi)的圖片會根據(jù)wrap的寬度改變已達到等寬擴充，height為auto的設(shè)置是為了保證圖片原始的高寬比例，以至于圖片不會失真。

除了img標簽的圖片外我們經(jīng)常會遇到背景圖片，比如logo為背景圖片：

#log a{display:block;
width:100%;
height:40px;
text-indent:55rem;
background-img:url(logo.png);
background-repeat:no-repeat;
background-size:100% 100%;
}
background-size是css3的新屬性，用于設(shè)置背景圖片的大小，有兩個可選值，第一個值用于指定背景圖的width,第2個值用于指定背景圖的height,如果只指定一個值，那么另一個值默認為auto。
background-size:cover; 等比擴展圖片來填滿元素
background-size:contain; 等比縮小圖片來適應(yīng)元素的尺寸

最后我們來總結(jié)下響應(yīng)式布局的實現(xiàn)原理

首先我們應(yīng)該遵循移動端優(yōu)先，交互和設(shè)計以移動端為主，pc則作為移動端的擴展，一個頁面需要兼容不同終端，那么有兩個關(guān)鍵點是我們需要去做到響應(yīng)式的：響應(yīng)式布局和響應(yīng)式內(nèi)容（圖片、多媒體）

1.響應(yīng)式布局
1.Meta標簽定義
2.使用Media Queries適配對應(yīng)樣式
2.響應(yīng)式內(nèi)容
1.響應(yīng)式圖片

我知道各位還在期待什么，無圖無真相，無dome不是瞎說嗎，紙上談兵，放心各位，博主不會這么討打的下面就貢獻出個人制作的響應(yīng)式布局dome.

git html 代碼https://github.com/lifenglei/mygit/blob/master/xiang.html
css代碼 https://github.com/lifenglei/mygit/blob/master/xiang.css

看完上述內(nèi)容，你們掌握什么是web響應(yīng)式布局的方法了嗎？如果還想學到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細節(jié)

什么是web響應(yīng)式布局

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽