前端开发响应式设计之媒体查询(bootstrap)
2015-08-10 22:23
881 查看
媒体查询就是可以根据设备显示器的特性(视口宽度、屏幕比例、设备方向-横向或者竖向等)为其设定CSS样式
为什么响应式设计需要媒体查询?因为没有CSS3的媒体查询模块,就不能针对设备特性(尤其是视口宽度)设置特定的CSS样式
bootstrap.css文件最后的若干行,就是有关媒体查询的代码,先暂时不看他的源码,看下面的简单的css示例代码:
给元素body定义了背景颜色白色,媒体查询查看当前是否是显示器screen,判断正确之后,再去查看当前screen的大小,根据不同的大小覆盖当前body背景颜色
上面的代码就是仿照bootstrap写的CSS3文件
媒体查询只有CSS3才有么,其实CSS2的时候就有这个了
通过导入link标签,媒体查询进行判断,如果当前设备是显示器,而不是打印机等其他的设备,那么就导入screen.css文件,这里要注意media和href的顺序,不要颠倒
之前有写过将media判断print打印机的情况,这样如果是打印机,导入相关css文件,可以在打印的时候添加额外想添加的格式
为什么响应式设计需要媒体查询?因为没有CSS3的媒体查询模块,就不能针对设备特性(尤其是视口宽度)设置特定的CSS样式
bootstrap.css文件最后的若干行,就是有关媒体查询的代码,先暂时不看他的源码,看下面的简单的css示例代码:
body { background-color: white; } @media screen and (max-width: 960px){ body { background-color: red; } } @media screen and (max-width: 768px){ body { background-color: yellow; } } @media screen and (max-width: 550px){ body { background-color: green; } } @media screen and (max-width: 320px){ body { background-color: blue; } }
给元素body定义了背景颜色白色,媒体查询查看当前是否是显示器screen,判断正确之后,再去查看当前screen的大小,根据不同的大小覆盖当前body背景颜色
上面的代码就是仿照bootstrap写的CSS3文件
媒体查询只有CSS3才有么,其实CSS2的时候就有这个了
<link rel="stylesheet" type="text/css" media="screen" href="screen.css">
通过导入link标签,媒体查询进行判断,如果当前设备是显示器,而不是打印机等其他的设备,那么就导入screen.css文件,这里要注意media和href的顺序,不要颠倒
之前有写过将media判断print打印机的情况,这样如果是打印机,导入相关css文件,可以在打印的时候添加额外想添加的格式
相关文章推荐
- 【BootStrap】--前端利器BootStrap
- Bootstrap前端框架入门
- Laravel 5.1.4 + Bootstrap 3.3.5 笔记三:Laravel 中间件
- Laravel 5.1.4 + Bootstrap 3.3.5 笔记二:Laravel 路由
- Bootstrap改变控件的高度和宽度问题
- css去掉使用bootstrap框架后打印网页时预览效果下的超链接
- 积跬步,聚小流------Bootstrap学习记录(2)
- bootstrap 下拉菜单两种实现方案
- 积跬步,聚小流------Bootstrap学习记录(1)
- bootstrap 几种导航栏
- Bootstrap学习--导航栏
- 第一个bootstrap网页
- Laravel 5.1.4 + Bootstrap 3.3.5 笔记一:Laravel 环境搭建
- 基于Servlet+JDBC+Bootstrap+MySQL+AJAX权限管理系统项目实战教程
- Bootstrap--组件之下拉菜单
- 利用Bootstrap制作一个流行的网页
- Bootstrap 准备工作
- Bootstrap的js插件之侧边栏停靠(affix)
- 2015.8.1 bootstrap学习(个人每日学习的随笔,比较凌乱
- Bootstrap的js插件之轮播(carousel)