概念
响应式布局的网站可以兼容多个终端,针对不同终端设备不同的样式,设备不同时显示不同。
优点:
- 面对不同分辨率设备灵活性强;
- 能够快捷解决多设备显示适用问题;
缺点:
- 兼容各种设备,效率低下;
- 代码累赘;
实现响应式布局的三种方式
- CSS3-Media Query(最简单的方式,但是无法满足很多需求)
- 借助原生Javascript(成本高,不推荐使用)
- 第三方开源框架(比如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">
这里视口的设置需要注意的是,视口就是可见的屏幕尺寸;设置视口时只设置宽度,而不在乎高度,这是因为高度由内容自动撑开。
具体含义如下:
- Width: 控制viewport的大小。如device-width为设备的宽度。
- initial-scale: 初始缩放比例,页面第一次加载时的缩放比例。
- maximum-scale 允许用户缩放到的最大比例,范围从0到10.0
- minimum-scale: 允许用户缩放到的最小比例,范围从0到10.0
- user-scalable: 用户是否可以手动缩放,值可以是: [yes | no]
以上就是知道不介绍的《CSS响应式布局学习笔记一》,希望对你有所帮助。
接下来您可以看一下篇《CSS响应式布局学习笔记二》。