HTML的響應式佈局設計

響應式佈局（Responsive design），意在實現不一樣屏幕分辨率的終端上瀏覽網頁的不一樣展現方式。簡而言之，就是一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。這個概念是爲解決移動互聯網瀏覽而誕生的。

 

1.設置meta標籤

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

device-width 表示設備寬度

注：在移動開發或響應式網站時，必需要設置viewport

 

2.流式佈局

按照各部分佔據屏幕的比例來進行設計

 

3.媒體查詢（media queries）——響應式佈局的核心

  媒體查詢的使用方式

  1）直接在css代碼中使用

@media 媒體類型（常選all或screen） and（條件1）and（條件2）{
css選擇器{
css屬性：屬性值
 }
}

  2）使用link標籤鏈接css，使用media屬性進行媒體查詢

    示例：<link rel="stylesheet" href="CSS/01-Pad.css" media="all and (max-width:800px)"/>

  3）使用import導入使用import導入css，能夠直接用空格分隔，進行媒體查詢

    示例：@import url("css/01-pad.css") all and(max-width:800px)

 

html代碼：

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

　　

<link rel="stylesheet" href="CSS/01-PC.css" />
<link rel="stylesheet" href="CSS/01-Pad.css" media="all and (max-width:800px)" />
<link rel="stylesheet" href="CSS/01-Mobile.css" media="all and (max-width:400px)" />　

css代碼

PC端:

body {
	background-color: #0000ff;
}

Pad端：

body {
	background-color: #000000;
}

Mobile端：

body {
		background-color: #ffffff;
	}

    

 

當縮放瀏覽器的大小時，PC端背景色爲藍色，當寬度縮放到800px時，背景顏色變成黑色，當寬度達到400px時，背景顏色會變成白色

注：不一樣的寬度之間進行縮放時，水平方向的進度條不能存在（各部分站的比例必須爲百分比）