总结CSS3新特性(媒体查询篇)-阿里云开发者社区

开发者社区> 贾顺名> 正文

总结CSS3新特性(媒体查询篇)

简介: CSS3的媒体查询是对CSS2媒体类型的扩展,完善; CSS2的媒体类型仅仅定义了一些设备的关键字,CSS3的媒体查询进一步扩展了如width,height,color等具有取值范围的属性; media query 与 media type 的区别在于: media query是一个值或一个范围...
+关注继续查看

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-系列,大尺寸的反之;

本文哪里有错误及不足还请大家指出;

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
用CSS新属性实现特殊的图片显示效果
使用一个或多个图像相关的CSS属性(background-blend-mode, mix-blend-mode, or filter)可以实现许多特殊的图片显示效果。本文转载自Bennett Feely的个人网站,文中共列举了20种图片显示效果。
792 0
Ext架构分析(3)--Widget之父Component:总结
在这里,我们引用Ext Overview中的Component life cycle对组件的功能进行相应的总结: [list=1] 配置项对象生效: 组件对象的构造器会把全部的配置项传入到其子类中去,并且进行下列所有的步骤。
687 0
Jquery利用ajax调用asp.net webservice的各种数据类型(总结篇)
转自:http://www.cnblogs.com/aierong/archive/2012/10/13/jqueryDataSetDataTablewebServicejsonajaxxml.html
645 0
开发者学堂课程干货总结——Spring Cloud微服务架构设计与开发实战(九)
Spring Cloud微服务架 Spring Cloud微服务架构设计与开发实战课时1.9—微服务架构中的经典设计模式 。Java Spring Cloud是全球范围内最成熟、最完善、最流行的微服务架构方案体系。被众多的互联网大公司采用,包括阿里巴巴、腾讯、支付宝、网易、IBM、谷歌、京东、百度、滴滴等。电子书+视频为同学带来最佳学习效果,文字、课程链接、图谱地址统统为大家放送了哦!
83 0
开发者学堂课程干货总结——Spring Cloud微服务架构设计与开发实战(八)
Spring Cloud微服务架 Spring Cloud微服务架构设计与开发实战课时1.8—微服务架构的设计策略 。Java Spring Cloud是全球范围内最成熟、最完善、最流行的微服务架构方案体系。被众多的互联网大公司采用,包括阿里巴巴、腾讯、支付宝、网易、IBM、谷歌、京东、百度、滴滴等。电子书+视频为同学带来最佳学习效果,文字、课程链接、图谱地址统统为大家放送了哦!
85 0
开发者学堂课程干货总结——Java 虚拟机原理(五)
Java 虚拟机原理课时1.5——Dragonwell特性:JWarmup。通过本节课的学习,能够掌握Java 虚拟机原理,学习JNI、类加载器原理、safepoint机制等知识。 电子书+视频为同学带来最佳学习效果,文字、课程链接、图谱地址统统为大家放送了哦!
67 0
开发者学堂课程干货总结——Java 虚拟机原理(六)
Java 虚拟机原理课时1.6——Dragonwell特性:Wisp。通过本节课的学习,能够掌握Java 虚拟机原理,学习JNI、类加载器原理、safepoint机制等知识。 电子书+视频为同学带来最佳学习效果,文字、课程链接、图谱地址统统为大家放送了哦!
72 0
+关注
贾顺名
JavaScript全沾开发一枚,喜欢研究各种好玩的东西,努力学习GO。 GitHub: https://github.com/jiasm
62
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载