HTML5+CSS3基礎(chǔ)響應(yīng)式頁面布局實(shí)例分析

這篇文章主要介紹了HTML5+CSS3基礎(chǔ)響應(yīng)式頁面布局實(shí)例分析的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇HTML5+CSS3基礎(chǔ)響應(yīng)式頁面布局實(shí)例分析文章都會(huì)有所收獲，下面我們一起來看看吧。

　　一、響應(yīng)式頁面布局的概念

　　響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念，簡而言之，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽器而誕生的。

　　二、響應(yīng)式布局的優(yōu)勢

　　響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)，而且隨著目前大屏幕移動(dòng)設(shè)備的普及，用“大勢所趨”來形容也不為過。隨著越來越多的設(shè)計(jì)師采用這個(gè)技術(shù)，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式。

　　三、響應(yīng)式布局網(wǎng)站案例（如下圖所示）：

　　核心知識(shí)點(diǎn)

　　v 彈性盒模型

　　v 媒體查詢

　　四、彈性盒模型

　　彈性盒布局模型是css3規(guī)范中提出的一種新的布局方式。

　　目的：提供一種更加高效的方式來對容器中的條目進(jìn)行布局、對齊和分配空間

　　優(yōu)勢：這種布局模式已被主流瀏覽器所支持，可以在web應(yīng)用開發(fā)中使用。

　　說明：

　　1.flex是display的一個(gè)屬性值。

　　2.設(shè)置了display:flex屬性的元素，稱為Flex容器，他里面的所有子元素統(tǒng)稱為容器成員，稱為Flex項(xiàng)目。后面我們就使用Flex容器和 Flex項(xiàng)目來進(jìn)行介紹。 Flex容器有兩根坐標(biāo)軸：主軸（main axis）和交叉軸（cross axis）。

　　Flex容器屬性

　　flex-direction: row | row-reverse | column | column-reverse;

　　flex-direction:row;

　　flex-direction:row-reverse;

　　flex-direction:column;

　　flex-direction:column-reverse;

　　justify-content 定義了Flex項(xiàng)目在主軸方向上的對齊方式

　　flex-start | flex-end | center | space-between | space-around;

　　justify-content:flex-start;

　　justify-content：flex-end;

　　justify-content：flex-center;

　　justify-content：space-between;

　　justify-content：space-around;

　　align-items：flex-start | flex-end | center | baseline | stretch; 定義項(xiàng)目在交叉軸上的對齊方式(適用于父類容器【彈性盒子】元素上)

　　align-items：flex-start;

　　align-items:flex-end;

　　align-items:center;

　　align-items:baseline;

　　align-items:stretch;

　　五、媒體查詢

　　1.什么是媒體查詢

　　使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。

　　@media 可以針對不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁面，@media 是非常有用的。

　　當(dāng)你重置瀏覽器大小的過程中，頁面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁面。

　　2.媒體查詢的作用

　　可以在不改變頁面內(nèi)容的情況下，為特定的一些輸出設(shè)備定制顯示效果，是響應(yīng)式布局實(shí)現(xiàn)的主要方式

　　3.媒體查詢的語法

　　v 外聯(lián)css語法：

　　<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

　　媒體類型：mediatype

　　關(guān)鍵字：and|not|only

　　媒體特征：media feature

　　實(shí)例：

　　<link rel="stylesheet" media="screen and (min-width:1024px)" href="red.css" />

　　v 內(nèi)嵌樣式的語法：

　　@media mediatype and|not|only (media feature) { ... }

　　媒體類型：mediatype

　　關(guān)鍵字：and|not|only

　　媒體特征：media feature

　　@ media  screen  and  (max-width: 960px){

　　body

　　{

　　@ media  screen  and  (max-(min-width:960px)  and  (max-width:1200px){

　　body{

　　background:yellow;

　　}

　　四、課堂案例

　　下面是一個(gè)響應(yīng)式布局的簡單案例

　　導(dǎo)航部分：

　　1） 導(dǎo)航部分由logo，導(dǎo)航和登錄三部分組成，這三部分放置在一個(gè)header的父容器中，給header設(shè)置display：flex；使之成為彈性盒模型，并設(shè)置主軸方向?yàn)閞ow，子元素在父容器中的對齊方式為兩端對齊。

　　2） 當(dāng)窗口小于等于640px時(shí)，將導(dǎo)航隱藏，添加媒體查詢

　　圖片列表部分

　　1） 所有的圖片都放置在一個(gè)class名為picture的父容器中，給父容器添加display:flex；使之成為彈性盒模型，并設(shè)置子元素的對齊方式為居中對齊（justify-content:center;）,并設(shè)置每一個(gè)子元素占據(jù)父元素的25%，溢出換行顯示。

　　2） 添加媒體查詢， 當(dāng)窗口小于640px時(shí)，每行放置兩張圖片，即每個(gè)子元素占據(jù)50%；

關(guān)于“HTML5+CSS3基礎(chǔ)響應(yīng)式頁面布局實(shí)例分析”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“HTML5+CSS3基礎(chǔ)響應(yīng)式頁面布局實(shí)例分析”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。