HTML5入門教程：響應式頁面佈局

摘自：https://www.sohu.com/a/225633935_647584

隨着互聯網時代的發展，咱們對網頁佈局有了新的要求，大氣，美觀，可以在不一樣的設備上呈現使人面目一新的效果。此時，一個全新的概念——響應式佈局應運而生！它的誕生爲咱們的移動端佈局帶來了很大的便利，所以學習響應式頁面佈局勢在必行！

01

響應式頁面佈局的概念

響應式佈局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。這個概念是爲解決移動互聯網瀏覽器而誕生的。

02

響應式佈局的優點

響應式佈局能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗，並且隨着目前大屏幕移動設備的普及，用「大勢所趨」來形容也不爲過。隨着愈來愈多的設計師採用這個技術，咱們不只看到不少的創新，還看到了一些成形的模式。

03

響應式佈局網站案例

（以下圖所示）：

04

彈性盒模型

彈性盒佈局模型是css3規範中提出的一種新的佈局方式。

目的：提供一種更加高效的方式來對容器中的條目進行佈局、對齊和分配空間。

優點：這種佈局模式已被主流瀏覽器所支持，能夠在web應用開發中使用。

說明：

1.flex是display的一個屬性值。

2.設置了display:flex屬性的元素，稱爲Flex容器，他裏面的全部子元素統稱爲容器成員，稱爲Flex項目。後面咱們就使用Flex容器和 Flex項目來進行介紹。 Flex容器有兩根座標軸：主軸（main axis）和交叉軸（cross axis）。

Flex容器屬性

flex-directionrow | row-reverse | column | column-reverse;

flex-direction:row;

flex-direction:row-reverse;

flex-direction:column;

flex-direction:column-reverse;

justify-content定義了Flex項目在主軸方向上的對齊方式

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-itemsflex-start | flex-end | center | baseline | stretch;

定義項目在交叉軸上的對齊方式(適用於父類容器【彈性盒子】元素上)

align-items：flex-start;

align-items:flex-end;

align-items:center;

align-items:baseline;

align-items:stretch;

05

媒體查詢

1.什麼是媒體查詢

使用@media查詢，你能夠針對不一樣的媒體類型定義不一樣的樣式。

@media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式，特別是若是你須要設置設計響應式的頁面，@media 是很是有用的。

當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面。

2.媒體查詢的做用

能夠在不改變頁面內容的狀況下，爲特定的一些輸出設備定製顯示效果，是響應式佈局實現的主要方式。

3.媒體查詢的語法

✦外聯css語法：

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

媒體類型：mediatype

關鍵字：and|not|only

媒體特徵：media feature

實例：

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

✦內嵌樣式的語法：

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

媒體類型：mediatype

關鍵字：and|not|only

媒體特徵：media feature

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

body{

background: #000;

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

body{

background:yellow;

}

4.課堂案例

下面是一個響應式佈局的簡單案例

▷▷導航部分：

1） 導航部分由logo，導航和登陸三部分組成，這三部分放置在一個header的父容器中，給header設置display：flex；使之成爲彈性盒模型，並設置主軸方向爲row，子元素在父容器中的對齊方式爲兩端對齊。

2） 當窗口小於等於640px時，將導航隱藏，添加媒體查詢

▷▷圖片列表部分:

1） 全部的圖片都放置在一個class名爲picture的父容器中，給父容器添加display:flex；使之成爲彈性盒模型，並設置子元素的對齊方式爲居中對齊（justify-content:center;）,並設置每個子元素佔據父元素的25%，溢出換行顯示。

2） 添加媒體查詢， 當窗口小於640px時，每行放置兩張圖片，即每一個子元素佔據50%；

綜上所述，掌握了彈性盒模型和媒體查詢，咱們就能夠很輕鬆的作出一個響應式的網站。