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时，背景颜色会变成白色

注：不一样的宽度之间进行缩放时，水平方向的进度条不能存在（各部分站的比例必须为百分比）