【媒体查询和多列】
主要内容
- 媒体查询
- 多列
学习目标
一、媒体查询
1.1概念
一说到响应式设计，肯定离不开媒体查询media。一般认为媒体查询是CSS3的新增内容，实际上CSS2已经存在了，CSS3新增了媒体属性和使用场景(IE8-浏览器不支持)。
Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
1.2响应式布局的优缺点
1.2.1优点
（1）面对不同分辨率设备灵活性强
（2）能够快捷解决多设备显示适应问题
1.2.2缺点
（1）兼容各种设备工作量大，效率低下
（2）代码累赘，会出现隐藏无用的元素，加载时间加长
1.3响应式设计的步骤
1.3.1设置meta标签
大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
