前端开发响应式设计之媒体查询(bootstrap)
来源:互联网 发布:网络舆情监测 编辑:程序博客网 时间:2024/05/17 01:48
媒体查询就是可以根据设备显示器的特性(视口宽度、屏幕比例、设备方向-横向或者竖向等)为其设定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文件,可以在打印的时候添加额外想添加的格式
1 0
- 前端开发响应式设计之媒体查询(bootstrap)
- 响应式设计之媒体查询一
- 响应式设计之媒体查询
- 响应式设计(Responsive Design)之媒体查询
- 响应式设计与CSS3媒体查询
- 媒体查询实现响应式设计
- css媒体查询实现响应式设计
- 响应式开发中的媒体查询
- 响应式布局之媒体查询
- 响应式布局之媒体查询功能
- 响应式布局之媒体查询
- 响应式页面之媒体查询二
- 响应式网页之媒体查询
- 前端之响应式设计
- Bootstrap笔记2—禁止响应、清除浮动、图片响应式、媒体查询
- css 利用媒体查询进行响应式设计
- 响应式设计媒体查询尺寸分界点一览表
- 响应式设计媒体查询尺寸分界点一览表
- gst xvimagesink插件不能正常生成
- uva 129 回溯
- OpenGL4.3如何管理buffer中的数据的
- 第六章
- 快速掌握 Android Studio 中 Gradle 的使用方法
- 前端开发响应式设计之媒体查询(bootstrap)
- Verilog实现任意分频和占空比
- 日常笔记
- JQUERY使用AJAX
- codeforces 476c Dreamoon and Sums
- 决策树方法小结
- poj 1611 The Suspects 并查集水题
- 通过公式运行代理
- java基础入门