響應式布局的開發基礎知識

2021-09-07 15:48:31 字數 2105 閱讀 2143

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

1.布局及設定meta標籤

當建立乙個響應式**,或者非響應式**變成響應式的時候,首先要關注元素的布局。我在建立響應式布局的時候習慣先寫非響應式布局,頁面固定寬度大小,我覺得這個對在座的各位沒有任何難度。如果完成了非響應式那麼我在去新增**查詢(media query)和響應式**。這種操作更容易實現響應式特性。

當你完成當你已經完成了無響應的**,做的第一件事是在你的 html 頁面,貼上下面的**到和標籤之間。這將設定螢幕按1:1的尺寸顯示,在 iphone 和其他智慧型手機的瀏覽器提供**全檢視瀏覽,並禁止使用者縮放頁面。

   user-scalable屬性能夠解決ipad切換橫屏之後觸控才能回到具體尺寸的問題。

2.通過**查詢來設定樣式media query

media query 是響應式設計的核心,它能夠和瀏覽器進行溝通,告訴瀏覽器頁面如何呈現,假如乙個終端的解析度小於980px,那麼可以這樣寫

@media screen and (max-width:980px)

#content

#footer }這裡面的樣式會覆蓋掉之前所定義的樣式。

3.設定多種檢視寬度

假如我們要相容ipad和iphone檢視,我們可以這樣設定:

/**ipad**/

@media only screen and (min-width:768px)and(max-width:1024px){}

/**iphone**/ @media only screen and (width:320px)and (width:768px){}

3.字型設定

到目前為止,開發人員用到的字型單位大部分都是畫素,雖然畫素在普通**上是ok的,但是我們仍然需要響應式字型。乙個響應式的字型應關聯它的父容器的寬度,這樣才能適應客戶端螢幕。

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

rem是相對於根元素的,不要忘記重置根元素字型大小:

html

完成後,你可以定義響應式字型:

@media (min-width:640px)}

@media (min-width:960px)} @media (min-width:1200px)} 不理解rem的童鞋,在這裡給大家推薦一篇寫的不錯的部落格(

4.響應式設計需要注意的問題

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

#head

#content

2.處理

哎喲 ,我這暴脾氣,我說的鑰匙不是真的鑰匙,而是指處理的萬能方法,是什麼呢?就是液態化。接著 會有人問:「什麼是液態化」呢?這個問題問的很好,給你打99分,多給你一分怕你驕傲,大家都知道水無形 能適合很多容器,那麼假如我們把當做水 是不是就可以實現自適應問題了呢?

#wrap img 如此設定後id為wrap內的會根據wrap的寬度改變已達到等寬擴充,height為auto的設定是為了保證原始的高寬比例,以至於不會失真。

#log a background-size是css3的新屬性,用於設定背景的大小,有兩個可選值,第乙個值用於指定背景圖的width,第2個值用於指定背景圖的height,如果只指定乙個值,那麼另乙個值預設為auto。 background-size:cover; 等比擴充套件來填滿元素 background-size:contain; 等比縮小來適應元素的尺寸

1.響應式布局

1.meta標籤定義

2.使用media queries適配對應樣式

2.響應式內容

1.響應式

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

git html **

css**

參考:

響應式布局的開發基礎知識

言歸正傳,博主因為是刨根問底攔不組的,所以在此就往響應式設計的祖墳上刨,深入了解下這四個步驟。1.布局及設定meta標籤 當建立乙個響應式 或者非響應式 變成響應式的時候,首先要關注元素的布局。我在建立響應式布局的時候習慣先寫非響應式布局,頁面固定寬度大小,我覺得這個對在座的各位沒有任何難度。如果完...

響應式布局的開發基礎

言歸正傳,博主因為是刨根問底攔不組的,所以在此就往響應式設計的祖墳上刨,深入了解下這四個步驟。1.布局及設定meta標籤 當建立乙個響應式 或者非響應式 變成響應式的時候,首先要關注元素的布局。我在建立響應式布局的時候習慣先寫非響應式布局,頁面固定寬度大小,我覺得這個對在座的各位沒有任何難度。如果完...

響應式布局的知識

meta標籤的viewport屬性是在移動裝置上設定原始大小顯示和是否縮放的宣告。可以使用的引數設定如下 width viewport的寬度 height viewport的高度 initial scale 初始的縮放比例 minimum scale 允許使用者縮放的最小比例 maxmum scal...