響應式布局的應用

彈性布局

為什麼使用彈性布局

有的**設計還在使用固定寬度(如960px),期望給所有終端使用者帶來較為一致的瀏覽體驗.這種固定寬度設計在筆記本上顯示剛好,而在部分高解析度顯示器上卻會在兩邊多出些空白,這樣的網頁給高解析度使用者的體驗是極差的,而彈性布局剛好解決了這個bug.

實現彈性布局的方法

綜合彈性盒模型的好處如下:

彈性盒模型的其他屬性:

伸縮換行 flex-wrap

flex-wrap屬性適用於伸縮容器,也就是伸縮專案的父元素,主要是用來定義伸縮容器裡是單行還是多行顯示.側軸的方向決定了新行堆放的方向、

flex-wrap:nowrap | wrap | wrap-reverse

主軸對齊 justify-content

justify-content屬性適用於伸縮容器,也就是伸縮專案的父元素.主要用來定義伸縮專案在主軸上的對齊方式

justify-content: flex-start | flex-end | center | space-between | space-around

側軸對齊align-items

align-items 屬性定義伸縮專案在側軸上的對齊方式.align-items和justify-content相呼應,可以把它想象成側軸(垂直於主軸)的justify-content.

align-items: flex-start | flex-end | center | baseline | stretch

**查詢

1.**型別

**型別(media type)在css2中是乙個常見的屬性,可以通過**型別對不同的裝置指定不同的樣式

在css2中常遇到的**型別是all(全部),screen(螢幕),print(頁面列印或列印預覽模式),w3c共列出十種**型別

值裝置型別

all所有裝置

braille

盲文觸覺回饋裝置

embossed

盲文印表機

handheld

便攜裝置

列印用紙或列印預覽檢視

projection

投影裝置

screen

電腦顯示器

speech

語音或音訊合成器

tv電視機裝置

tty使用固定密度字母柵格的媒介,如電傳印表機和終端

企業中最常用的就是all,screen,print三種,不過**型別引入方式常用的有兩種

2.**特性

**特性(media query)是css3對**型別(media type)的增強版,其實可以將media query看成"media type(判斷條件)+css(符合條件的樣式規則)"屬性值

min/max

描述device-width

length

yes設定螢幕的輸出寬度

device-height

length

yes設定螢幕的輸出高度

width

length

yes渲染介面的寬度

height

length

yes渲染介面的高度

orientation

portrait/landscape

no橫屏或豎屏

resolution

解析度(dpi/dpcm)

yes解析度

color

整數yes

每種色彩的位元組數

color-index

整數yes

色彩表中的色彩數

media query能在不同的條件下使用不同的樣式,使頁面在不同終端裝置下達到不同的渲染效果

@media **型別	and (**特性)
例:@media screen and (max-width: 639px)
li}

4.**查詢的使用

在使用**查詢製作網頁的時候有些地方需要注意一下:

1.遇到衝突時的機制

2.設定主要斷點

簡單地理解就是,設定寬度的臨界點,在media query中,**特性min-width和max-width對於的屬性值就是響應式設計中的斷點值.使用主要斷點建立**查詢的條件,而每個斷點會對應呼叫乙個樣式檔案(或者樣式**)

常見的斷點值為320px,480px,640px,768px,1024px等

響應式布局的應用

響應式布局的優缺點

響應式布局的優點:

響應式布局的缺點:

響應式布局的應用

響應式布局 響應式布局技巧

響應式布局

響應式布局

相關推薦

響應式布局響應式布局技巧