流式布局

1. 视口标签 meta

	// 申明编码
	<meta charset="utf-8">
	// 优先使用 IE 最新版本和 Chrome
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	// viewport 视口标签
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

meta 属性

属性	值	描述
content	some_text	设置或返回 元素的 content 属性的值
http-equiv	content-type、expires、refresh、set-cookie	把 content 属性连接到一个 HTTP 头部
name	author、description、keywords、generator、revised、others	把 content 属性连接到某个名称
scheme	some_text	设置或返回用于解释 content 属性的值的格式

content 属性

属性	描述
width	宽度设置的是viewport宽度，可以设置device-width(设备宽)特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字
user-scalable	用户是否可以缩放，yes或no（1或0）

2. CSS初始化 normalize.css

normalize.css下载地址

• 优点：
  • 修复浏览器bug
  • 模块化
  • 详细文档
  • 默认值完整

3. 流式布局（百分比布局）

• 流式布局，就是百分比布局，也叫非固定像素布局
• 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
• 流式布局是移动端常见的布局方式

div {
	width: 100%;
	min-width: 300px;
	max-width: 500px;
	height: 500px;
}

如需转载，请标注