CSS响应式布局学习笔记一

概念

响应式布局的网站可以兼容多个终端，针对不同终端设备不同的样式，设备不同时显示不同。
优点：

1. 面对不同分辨率设备灵活性强；
2. 能够快捷解决多设备显示适用问题；

缺点：

1. 兼容各种设备，效率低下；
2. 代码累赘；

实现响应式布局的三种方式

1. CSS3-Media Query（最简单的方式，但是无法满足很多需求）
2. 借助原生Javascript（成本高，不推荐使用）
3. 第三方开源框架（比如bootstrap,可以很好的支持浏览器的响应式布局）

设置meta标签

在完成非响应式布局后，需设置meta标签来告诉浏览器，让视口宽度等于设备宽度，而且禁止用户缩放行为。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

这里视口的设置需要注意的是，视口就是可见的屏幕尺寸；设置视口时只设置宽度，而不在乎高度，这是因为高度由内容自动撑开。

具体含义如下：

1. Width: 控制viewport的大小。如device-width为设备的宽度。
2. initial-scale: 初始缩放比例，页面第一次加载时的缩放比例。
3. maximum-scale 允许用户缩放到的最大比例，范围从0到10.0
4. minimum-scale: 允许用户缩放到的最小比例，范围从0到10.0
5. user-scalable： 用户是否可以手动缩放，值可以是: [yes | no]

---

以上就是知道不介绍的《CSS响应式布局学习笔记一》，希望对你有所帮助。

接下来您可以看一下篇《CSS响应式布局学习笔记二》。