css3的@media
都知道bootstrap响应式布局很酷,但是是怎么实现的呢?其官网首页有提到这一切的功劳都是来自于CSS 媒体查询(Media Query)。
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
一、media的几种引用方式
1、直接在head中引用
这也是我们很常见的引用方式,只不过很多时候我们都不太懂是什么意思。感觉又好像没有起太大作用的样子,就容易被我们忽视。
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
这里的描述的意思是:只有当当前设备是电脑屏幕,平板电脑,智能手机等才引入这个css样式文件
2、用import引入样式
但是要在style下面才能引入,
<style type="text/css" media="screen"> 或者写成<style type="text/css" media="screen and (max-width: 600px)">
@import url("css/style.css");
</style>
这里描述的意思是:只有当当前设备是电脑屏幕,平板电脑,智能手机并且宽度小于等于600px的时候才引入这个css样式文件
3、直接在代码中写@media
bootstrap用的就是这种方法
@media print and (max-width: 600px) {
选择器 {
属性:属性值;
}
}
这里描述的意思是:只有当当前设备是打印机并且宽度小于或等于600px时候才引入这个样式文件
这里可能会疑问为啥max-width:600px 还表示小于600px呢?
因为这里是指要满足媒体类型(media type)和媒体特征(media feature)这两个条件才触发里面的代码,小于600px就是指最大没超过600px;
而满足的这两个条件并且和 and|not|only 这三关键字共同发生作用的过程叫媒体查询(media query)
二、media的语法、媒体类型和媒体特征以及关键的解释
1、media的语法
针对不同的媒体使用css样式,例如只是控制个颜色、宽度等
@media media type and|not|only (media feature) {
CSS-Code;
}
针对不同媒体引用不同的css样式文件
<link rel="stylesheet" media="media type and|not|only (media feature)" href="mystylesheet.css">
2、媒体类型
媒体类型就是media tyep,通常的值有:
值 | 描述 |
---|---|
all | 用于所有设备 |
用于打印机和打印预览 | |
screen | 用于电脑屏幕,平板电脑,智能手机等。 |
speech | 应用于屏幕阅读器等发声设备 |
3、媒体特征
媒体特征就是media feature,通常的值有:
值 | 描述 |
---|---|
aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的比率 |
color | 定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0 |
color-index | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0 |
max-color | 定义输出设备每一组彩色原件的最大个数。 |
min-color | 定义输出设备每一组彩色原件的最小个数。 |
max-color-index | 定义在输出设备的彩色查询表中的最大条目数。 |
min-color-index | 定义在输出设备的彩色查询表中的最小条目数。 |
device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的比率。 |
min-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最小比率。 |
max-device-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
device-height | 定义输出设备的屏幕可见高度。 |
device-width | 定义输出设备的屏幕可见宽度。 |
grid | 用来查询输出设备是否使用栅格或点阵。 |
height | 定义输出设备中的页面可见区域高度。 |
max-aspect-ratio | 定义输出设备的屏幕可见宽度与高度的最大比率。 |
max-device-height | 定义输出设备的屏幕可见的最大高度。 |
max-device-width | 定义输出设备的屏幕最大可见宽度。 |
min-device-width | 定义输出设备的屏幕最小可见宽度。 |
min-device-height | 定义输出设备的屏幕的最小可见高度。 |
max-monochrome | 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。 |
max-resolution | 定义设备的最大分辨率。 |
min-aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的最小比率。 |
max-height | 定义输出设备中的页面最大可见区域高度。 |
max-width | 定义输出设备中的页面最大可见区域宽度。 |
min-height | 定义输出设备中的页面最小可见区域高度。 |
min-width | 定义输出设备中的页面最小可见区域宽度。 |
min-monochrome | 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数 |
min-resolution | 定义设备的最小分辨率。 |
monochrome | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0 |
orientation | 定义输出设备中的页面可见区域高度是否大于或等于宽度。 |
resolution | 定义设备的分辨率。如:96dpi,300dpi,118dpcm |
scan | 定义电视类设备的扫描工序。 |
width | 定义输出设备中的页面可见区域宽度。 |
然后解释一下max-device-width与max-width的区别
max-width指的是浏览器的显示区域宽度;max-width在窗口大小改变或横竖屏转换时会发生变化。
max-device-width指的是设备的实际屏幕宽度,也就是设备分辨率;max-device-width只与设备相关,在窗口大小改变或横竖屏转换时都不会发生变化。
4、解释三个关键字
解释
and关键字相当于&&
not正好是取反
only表示不支持媒体特征(Media feature)但又支持媒体类型(Media Type)的设备
实例
not关键字实例:
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />
not关键字是用来排除某种制定的媒体类型,换句话来说就是用于排除符合表达式的设备。
only关键字实例
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
only用来定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。
其主要有:支持媒体特性(Media Queries)的设备,正常调用样式,此时就当only不存在;对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备,这样就会不读了样式,因为其先读only而不是screen;另外不支持Media Qqueries的浏览器,不论是否支持only,样式都不会被采用。
三、其他附加知识
在Media Query中如果没有明确指定Media Type,那么其默认为all,如:
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css">
另外还有使用逗号(,)被用来表示并列或者表示或,如下
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (max-width:480px), screen and (min-width:960px)" />
原文地址:https://www.cnblogs.com/Juaoie/p/11441850.html
- Spring Security笔记:解决CsrfFilter与Rest服务Post方式的矛盾
- GitHub新开放项目FoolNLTK:一个便捷的中文处理工具包
- hessian学习
- 制作WordPress侧边栏“博客统计”小工具并集成在主题中的方法
- Struts2、Spring MVC4 框架下的ajax统一异常处理
- 前11月网游收入1341亿元同比增超两成 你贡献了多少?
- struts2: config-browser-plugin 与 convention-plugin 学习
- 千万级规模高性能、高并发的网络架构经验分享
- UE4新手之编程指南
- redis 学习笔记(5)-Spring与Jedis的集成
- Linq to SQL 查询Tips
- SQLite 预写式日志
- java调用.net asmx / wcf
- mybatis3.2.8 与 hibernate4.3.6 混用
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例