CSS3@media媒体查询

定义

media媒体查询, 当文档宽度变化时, 就可以根据文档宽度的变化来运用样式,不同的宽度应用不同的样式

使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。

当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

语法

在CSS中,@media规则可置于您代码的顶层或位于其它任何@条件规则组内

媒体查询包含一个可选的媒体类型和媒体特性表达式(0或多个)最终会被解析为truefalse。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型,并且所有的表达式的值都是true,那么该媒体查询的结果为true

实例: 如果文档宽度小于 300 像素时 .box 使用这个样式( 超过了这个宽度就不使用这个样式了),(表达式为真执行)

@media screen and (max-width: 300px) {
.box {
background-color:lightblue;
width: 200px;
}
}

除了在@media 规则中使用外,媒体查询也可应用于HTML标签以将样式表的应用限于某个特定媒体。

<!-- Media-dependent style sheet included in HTML -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen-styles.css" />

逻辑操作符

使用逻辑操作符,包括notandonly等,构建复杂的媒体查询。

and 操作符用来把多个媒体属性组合成一条媒体查询,对成链式的特征进行请求,只有当每个属性都为真时,结果才为真。

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

only 操作符仅在媒体查询匹配成功的情况下被用于应用一个样式,这对于防止让选中的样式在老式浏览器中被应用到。

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

媒体类型

all  适用于所有设备。

print 为了加载合适的文档到当前使用的可视窗口. 需要提前咨询 paged media(媒体屏幕尺寸), 以满足个别设备网页尺寸不匹配等问题。

screen  主要适用于彩色的电脑屏幕

CSS3@media媒体查询的更多相关文章

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

    css3 media媒体查询器用法总结 标签:class   代码   style   html   sp   src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...

  2. css3 media媒体查询器用法总结

    随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...

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

    总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml ...

  4. CSS3 media媒体查询器的使用方法

    最近几年随着响应式布局的发展,一次开发多次使用,自适应屏幕的响应式网站的需求越来越多.但是怎样使得网站能自适应屏幕呢?这里就需要提到一个css3里面新增的技术了-media媒体查询器. 那么什么是me ...

  5. CSS Media媒体查询使用大全,完整媒体查询总结

    前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...

  6. css3新特性@media(媒体查询)

    现在web页面运行的设备的屏幕从pc端到pad,从pad到手机,各种各样,这样就用到了现在经常用到的响应式页面,为实现响应式页面开发,就用到一个非常有用的css3属性media(媒体查询). 介绍:媒 ...

  7. css3的媒体查询(Media Queries)

    我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media="scr ...

  8. 控制页面打印的2种方法(css3的media媒体查询和window.print())

    在实际开发中,有时可能会有打印的需求.下面我总结了2种打印的方法,希望对各位小伙伴有所帮助. ①:直接用window.print()方法就可以打印整个页面,下面是一个小demo <!DOCTYP ...

  9. CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全

    媒体查询介绍 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media=&q ...

随机推荐

  1. 如何设置记事本( .txt文件)的默认编码为UTF-8?

    1.在桌面新建一个文本文档,不要写入任何内容,然后手动另存为,将此文档编码改为UTF-8,然后将文件名字改为template.txt: 2.再将template.txt移动到C:\Windows\Sh ...

  2. MySQL 详细学习笔记 转

    Windows服务 -- 启动MySQL net start mysql -- 创建Windows服务 sc create mysql binPath= mysqld_bin_path(注意:等号与值 ...

  3. F#周报2019年第13期

    新闻 Visual Studio 2019发布会 Json2FSharp--在线类型生成器 cs2fs-online--从C#到F#的移植器 AWS Lambda layer上的.NET Core A ...

  4. 蓝桥杯九宫重排(bfs+用set去重)

    题目连接 #define _CRT_SECURE_NO_WARNINGS #include<cstdio> #include<iostream> #include<que ...

  5. 长连接锁服务优化实践 C10K问题 nodejs的内部构造 limits.conf文件修改 sysctl.conf文件修改

    小结: 1. 当文件句柄数目超过 10 之后,epoll 性能将优于 select 和 poll:当文件句柄数目达到 10K 的时候,epoll 已经超过 select 和 poll 两个数量级. 2 ...

  6. 在docker上部署mysql

    1.拉取官方镜像5.6的版本.(查看有哪些版本,可以在阿里云的镜像仓库查看,我配置的镜像是阿里云的) docker pull mysql:5.6 2.查看拉取的镜像,获取镜像id docker ima ...

  7. Flask 接入第三方云通讯平台时出现 {‘172001’:’网络错误’}

    错误:{‘172001’:’网络错误’},经过上网查找原因,原来是 Python 升级到 2.7.9 之后引入了一个新特性,当打开一个 https 链接时,会验证一次 SSL 证书.而当目标网站使用的 ...

  8. socket通信的遇到的问题1

    /*使用select对fd可读写,格式*/ while(ctrl){ //// FD_ZERO(&readSocketSet); FD_SET(readSocketFd,&readSo ...

  9. Freemaker Replace函数的正则表达式运用

    replace(param1,param2,param3) param1 正则表达式:param2 将匹配的字符替换成指定字符:param3 模式 param3 参数如下  模式  i   r   m ...

  10. 获奖感想与Java阶段性学习总结

    获奖感想 其实我早就知道有小黄衫这个东西,而且它就在我的目标清单里,不过没想到娄老师发的这么早.我想小黄衫代表着的是老师对我这一阶段来学习成果和努力的肯定,虽然Java学习中付出很多时间精力,现在也值 ...