总结CSS3新特性(媒体查询篇)
总结CSS3新特性(媒体查询篇)
CSS3的媒体查询是对CSS2媒体类型的扩展,完善;
CSS2的媒体类型仅仅定义了一些设备的关键字,CSS3的媒体查询进一步扩展了如width,height,color等具有取值范围的属性;
media query 与 media type 的区别在于: media query是一个值或一个范围的值,而media type仅仅是设备的匹配(所以media type 是一个单词,而media query 后边需要跟着一个数值,两者可以混合使用);
media可用于link标签属性 [media]
<link rel="stylesheet"type="text/css"href="../css/print.css"media="print and (max-width : 600px)"/>
以及css文件内,下边代码均是使用css内media;
介绍一下可用的运算符&常用的media type以及media query:
运算符:
and:
and运算符用于符号两边规则均满足条件则匹配
@media screen and (max-width: 600px){/*匹配宽度小于600px的电脑屏幕*/}
not:
not运算符用于取非,所有不满足该规则的均匹配
@media not print{/*匹配除了打印机以外的所有设备*/}
使用not时请注意,如果不加括号,也许会产生一些奇怪的现象,例:
@media not all and (max-width: 500px){}
/*等价于*/
@media not (all and (max-width: 500px)){}
/*而不是*/
@media(not all) and (max-width: 500px){}
所以,如果要使用not,还是显式的添加括号比较明确点
,(逗号):
相当于 or 用于两边有一条满足则匹配
@media screen , (min-width: 800px){
/*匹配电脑屏幕或者宽度大于800px的设备*/
}
Media Type(只说几个常用的,其余会给出链接):
All:
all是默认值,匹配所有设备;
@media all{
/* 可以过滤不支持media的浏览器 */
}
Screen:
匹配电脑屏幕;
Print:
匹配打印机(打印预览时也会匹配)[本人简历专门为print做了一套样式~]
常用的一般就这三个type,其余Media Type 有兴趣的可以看下 W3School的说明或W3的文档
Media Query(也是说一些常用的): //需要注意的是,Media Query必须要加括号,一个括号是一个query
max-width(max-height):
@media (max-width: 600px){
/*匹配界面宽度小于600px的设备*/
}
min-width(min-height):
@media (min-width: 400px){
/*匹配界面宽度大于400px的设备*/
}
max-device-width(max-device-height):
@media (max-device-width: 800px){
/*匹配设备(不是界面)宽度小于800px的设备*/
}
min-device-width(min-device-height):
@media (min-device-width: 600px){
/*匹配设备(不是界面)宽度大于600px的设备*/
}
做移动开发时用device-width/device-height,比较好一点吧,因为有些手机浏览器默认会对页面进行一些缩放,所以按照设备宽高来进行匹配会更接近开发时所期望的效果;
给出全部的Media Query属性值的链接 W3的文档 也可以看看MDN的,有志愿者汉化了 MDN Media Query 文档
media是可以嵌套的:
@media not print{
/*通用样式*/
@media (max-width:600px){
/*此条匹配宽度小于600px的非打印机设备*/
}
@media (min-width:600px){
/*此条匹配宽度大于600px的非打印机设备*/
}
}
这样省去了将 not print 写两遍的冗余.这样写也是有一定好处的,因为有些浏览器也许只支持Media Type 而不支持 Media Query- -(不要问我为什么知道,栽过坑)
Media Query(仅指上边那几个)的值的单位可以是 px em rem (%/vh/vw/vmin/vmax什么的没有试…感觉应该没什么用吧…);
Media Query是响应式页面的核心,其实说响应式页面就是在不同分辨率下显示不同的效果;
编写响应式页面CSS时分为从小到大和从大到小(尺寸);
本人弱弱的推荐从小尺寸开始写的 Media Query 使用 max-系列,大尺寸的反之;
本文哪里有错误及不足还请大家指出;
- 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 实例