HTML的响应式布局设计

最新推荐文章于 2024-07-14 17:05:44 发布

转载最新推荐文章于 2024-07-14 17:05:44 发布 · 234 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/1960366876tZ/p/8596882.html

文章标签：

#移动开发

响应式布局（Responsive design），意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

1.设置meta标签

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

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

转载于:https://www.cnblogs.com/1960366876tZ/p/8596882.html