响应式网页设计是采用CSS的媒体查询(media query)技术,将三种已有的开发技巧,包括弹性网格布局、弹性图片、媒体和媒体查询整合在一起,命名为响应式网页设计。
1.视口
视口可以通过一个名称为 viewport 的元(meta)标签来进行控制,规则如下:
<meta name=“viewport” content=“width=device-width,initial-scale=1.0”>
- maximum-scale : 允许用户缩放到的最大比例,范围从0到10.0。
- minimum-scale : 允许用户缩放到的最小比例,范围从0到10.0。
- user-scalable : 用户是否可以缩放,值可以是:yes表示允许用户缩放;no表示不允许用户缩放。
1.1 视口常用属性及意义
属性值 | 含义 |
width | 设定布局视口宽度 |
height | 设定布局视口高度 |
initial-scale | 设定页面初始缩放比例 (0-10) |
user-scalable | 设定用户是否可以缩放(yes/no) |
minimum-scale | 设定最小缩小比例(0-10) |
maximum-scale | 设定最大放大比例(0-10) |
2. 媒体查询
2.1 语法
@media 媒体类型 and (媒体特性){
CSS样式
}
2.2 常用媒体类型
- all ——所有设备
- screen —— 电脑显示器
- print —— 打印设备
2.3 引入媒体查询的方式
-
@media 媒体类型 { 选择器{ /*样式代码写在这里…*/} }
-
<link rel="stylesheet" href="style1.css" media="媒体类型" />
2.4 媒体特性
- and:同时满足这两者时生效,到达限定范围
- only:指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器
- not:排除某种指定的媒体类型,即排除符合表达式的设备
3. 响应式布局的优缺点
优点:
- 面对不同分辨率设备灵活性强,能够快捷解决多设备显示使用问题
- 更少维护,开发一个网站,多终端使用
缺点:
- 兼容各种设备工作量大
- 代码累赘,会出现隐藏无用的元素,加载时间长
4. 小案例
通过媒体查询实现响应式布局(简易的响应式滑动菜单):
心里有梦就要付诸行动!