初识CSS3之媒体查询(2015年05月31日)

一、什么是媒体查询

媒体查询是面向不同设备提供不同样式的一种实现方式,它可以为每种类型的用户提供最佳的体验,也是响应式设计的实现方式。

现今每天都有更多的手机和平板电脑问市。消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器、手机和平板电脑浏览器上有很好的效果,如何在各种大小的屏幕上提供一流的用户体验,答案是:采用响应式设计。响应式设计可以随所显示的屏幕大小而改变。实现响应式设计的主要方法是使用 CSS 媒体查询。

二、媒体查询规则

1、引入方式

<!-- 1、link元素中的CSS媒体查询 -->

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 2、样式表中的CSS媒体查询 -->

<style>

@media (max-width: 600px) {

.facet_sidebar {

display: none;

}

}

</style>

2、相关规则

媒体查询包含了一个媒体类型 和如CSS3规范中描述的包含一个或多个表达式的媒体属性,这些媒体属性会被解析成真或假。如果媒体查询中的媒体类型与文档要展示的设备相符则查询结果为真,并且媒体查询中的所有表达式为真。

@media (min-width:800px) { ... }

媒体类型:media;

媒体属性(表达式):min-width:800px;表示最小宽度为800px,如果浏览器的最小宽度为800px,则使用{ ... }中的样式

@media (min-width:800px) and (max-width:1200px) { ... }则表示:在最小宽度为800px,最大宽度为1200px时应用{...}中的样式

三、媒体查询语法

1、逻辑操作符

操作符 not、and、or、 only 可以用来构建复杂的媒体查询。

and 操作符用来把多个 媒体属性 组合起来,合并到同一条媒体查询中。只有当每个属性都为真时,这条查询的结果才为真。

@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

表示媒体查询仅在最小宽度为800px,最大宽度为1200px,并且方向是纵向的时候才应用{...}中的样式

or操作符用来把多个媒体属性组合起来,只要有其中一个媒体属性为真,则整个查询结果都为真

@media (min-width:800px) or (orientation:portrait) { ... }

表示媒体查询在最小宽度为800px或者方向为纵向的时候使用{...}中的样式

not 操作符用来对一条媒体查询的结果进行取反。

not位于媒体查询的开始处,not 会忽略结果。换句话说,如果该查询本来在没有 not 关键词的情况下为 true,那么现在它将为 false

@media (not min-width:800px) { ... }

表示在最小宽度不是800px的时候,会使用{...}中的样式

only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。

若使用了 not 或 only 操作符,必须明确指定一个媒体类型。

你也可以将多个媒体查询以逗号分隔放在一起;只要其中任何一个为真,整个媒体语句就返回真。相当于 or 操作符。

@media (min-width:800px), (orientation:portrait) { ... }

表示媒体查询在最小宽度为800px或者方向为纵向的时候使用{...}中的样式

2、媒体属性

3、媒体类型

在JetBrains WebStorm 10.0.2中输入@media便会有以下的提示信息,查了下资料才知道这是媒体类型

四、一个超简单的Demo

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>/*       页面可见宽度大于800px时,页面背景为蓝色        */@media screen and (min-width: 800px) {body{background-color: blue;            }        }/*        页面可见宽度小吴800px时,页面背景为红色        */@media screen and (max-width: 800px) {body{background-color: red;           }       }</style></head><body>

</body></html>

效果:

 

缩小浏览器窗口后

 

五、使用感受

优点:使用媒体查询能为不同的设备制定不同的样式,使得页面效果在各个设备上的视觉效果良好,提高了用户体验度。

缺点:需要为不同的设备编写不同的css样式,增大了开发的复杂度。

建议使用:Bootstrap、Amaze UI等优秀开源前端框架

时间: 2024-11-09 00:04:03

初识CSS3之媒体查询(2015年05月31日)的相关文章

java之enum枚举(2015年05月28日)

背景: 今天启动了一个新的项目,由于要从之前的旧项目中拿过来一些代码,所以就看了下公司之前项目代码,发现有定义的常量类,也有枚举类,然后就在想着两者的功能差不多,那他们之间到底有什么区别呢,所以就决定了解下enum枚举   一.简介 Java 中的枚举类型采用关键字enum 来定义,从jdk1.5才有的新类型,所有的枚举类型都是继承自Enum 类型. 二.基本用法 1.作为常量使用 一个完整的枚举类型示例 /** * 枚举 * @author Dreyer * @since 1.0 * @dat

1、关于Boolean(2015年05月30日)

背景:刚在看Effective Java,看到一段关于Boolean提供一个返回实例的静态方法的例子,便去看了下Boolean的源码,发现有些内容是之前没注意到的,于是便有了下面这些. 1. Boolean类将基本类型boolean的值包装在一个对象中,一个Boolean对象之包含一个类型为boolean的字段,摘自源码: /** * The value of the Boolean. * * @serial */ private final boolean value; Boolean还提供了

实用工具推荐(Live Writer)(2015年05月26日)

1.写博客的实用工具 推荐软件:Live Writer 使用步骤: 1.安装 Live Essential 2011,下载地址:http://explore.live.com/windows-live-writer 2.安装 2.1: 2.2:我们只需要Write组件 2.3:点击“安装”按钮,安装完成后,打开该软件 -> Windows Live 中打开 Windows Live Writer 首先需要对 Live Writer 进行配置,在选择日志服务的界面中选择:其他服务,如下图: 点击下

零基础学习云计算及大数据DBA集群架构师【Linux系统配置及网络配置2015年12月31日周四】

2015.12.31/Thu *************摘要************** 查看硬盘 df du 硬盘的操作 分区 fsdisk 格式化mkfs 检测 fsck 挂载 mount 卸载 umount 建立 swap 分割槽: 1. 分割:fdisk t 2. 格式化:mkswap 3. 使用:swapon 4. 观察:free df <==列出目前挂载的装置 dumpe2fs [-bh] 装置文件名 选顷不参数: -b :列出保留为坏轨癿部分(一般用丌到吧!?) -h :仅列出 s

前端需要点亮的技能树(2015年12月31日更新)

1.github个人总站点搭建 2.LESS学习及应用 3.FIS3学习及应用 4.常用CSS模块 5.常见JS特效 6.JS三本书籍阅读 7.CSS两本书籍 8.HTML5书籍 9.HTTP协议:学习及总结 10.浏览器原理学习及总结 11.Node.js 学习及总结 12.JS设计模式 13.Web性能优化 14.仿站 15.FIS3GUI开发 16.谷歌扩展开发 17.正则表达式

css3 media媒体查询器用法总结 兼容ie8以下的方法

总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml 准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 这段代码的几个参数解释: width = device-width:宽度等于当前设备的宽度 initial-scale:初始的缩放比例(默认设置为1.0) minimum-scale:允许

css3 media媒体查询器用法总结

css3 media媒体查询器用法总结 Author:owenhong2014-05-30 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆的尝试了这项技术,并完美的应用在了自己的网站上了.再不更新知识你就老了.我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 准备工作1:设置Meta标签 首先我们在使用Media的时候

css3 media媒体查询器用法总结(转载)

用法及meta标签的使用及IE最新 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆的尝试了这项技术,并完美的应用在了自己的网站上了.再不更新知识你就老了.我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: <m

css3 media媒体查询器用法总结(附js兼容方法)

css3 media媒体查询器用法总结 标签: 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆的尝试了这项技术,并完美的应用在了自己的网站上了.再不更新知识你就老了.我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示