@media

构:

@media  all and( min-width:600px){

样式表:即

.mainbox{ background:#fff000;}

}

all可指定的值:

样式表:

使用and关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式,譬如以下语句指定了当窗口宽度小于640px时所使用的样式:
@media screen and (max-width:639px){样式代码}
可以使用多条语句来将同一个样式应用于不同的设备类型和设备特性中,指定方式类型如下所示:
@media handled and (min-width:360px),screen and (min-width:480px){样式代码}
可以在表达式中加上not关键字或only关键字,not关键字表示对后面的表达式执行取反操作,书写方法如下所示:

@media not handled and (color) {样式代码}
//样式代码将被使用在所有非彩色设备中
@media all and (not color)
only关键字的作用是,让那些不支持Media Queries但是能够读取Media Type的设备的浏览器将表达式中的样式隐藏起来。例如,对于如下的语句来说:
@media only screen and (color){样式代码}
对于支持Media Queries的设备来说,将能够正确的应用样式,就仿佛only不存在一样。对于不支持Media Queries便能够读取Media Type的设备(譬如IE8只支持"@media screen")来说,由于先读取到的是only而不是screen,将忽略这个样式。
对于不支持Media Queries的浏览来说,无论是否有only,都将忽略这个样式。
CSS3中的Media Queries模块中也支持对外部样式表的引用,使用方法类似如下表示:
@import url(color.css) screen and (min-width:1000px)

@media,布布扣,bubuko.com

时间: 2024-10-14 11:18:45

@media的相关文章

media 适屏

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@media</title> <meta name="hugo" content="" /> <style> .test1, .test2 { display: none; } /* 本条为CSS2部分,IE8及以下只支持本条 *

ORA-01153 an incompatible media recovery is active

ORA-01153错误处理 问题描述: 主备在做Switchover切换时,在切换后的备库报如下错误: ORA-01153: an incompatible media recovery is active 解决办法: 对standby database 进行手动应用archive log SQL> recover managed standby database cancel; SQL> recover automatic standby database ; SQL> RECOVER

Jquery Media插件使用,解决在线预览及打开PDF文件

用到过PDF的媛媛and猿猿们,总会发现这大千世界之万能播放器插件,总能少了对媒体控制的接口. 你总会发现PDF无法像img图片一样正常加载展现出来,那么我们在通用语法的基础上拓展出了适用于预览及打开的PDF插件便于开发应用. 最主要的是使用到了一个jquery的插件jquery.media.js,使用这个插件就很容易实现了. 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverl

ORA-01113: file xxxx needs media recovery

由于规范存储位置以及存储空间调整缘故需要移动表空间MRP_INDEX2的数据文件,如下所示,首先将表空间MRP_INDEX2脱机; 然后复制数据文件:接着重命名数据文件,最后将表空间MRP_INDEX2联机. 在操作过后,最后一步将表空间MRP_INDEX2联机上线时,出现了意外错误信息,如下所示: SQL> ALTER TABLESPACE MRP_INDEX2 OFFLINE NORMAL;   Tablespace altered.   SQL> !cp /u03/flash_recov

bootstrap-图文混排 media

<!-- media 图文混排 media-left(right) 图片的区域 在左边显示(右边) media-body 内容区域 media-heading 内容区域里的标题 media-middle 图片居中 media-bottom 图片居下 --> <div class="container"> <div class="row" style="width:500px"> <div class=&q

第一章 响应式设计之Media Quer

书里谈到尽量不要使用Media Queriy. 但是过多使用media query,会导致CSS变得脆弱和页面难以维护.一些方法可以减少页面使用 media query. 响应式设计: (1) 使用百分比替换固定的宽度.如果不行,也尽量使用vw, vh, vmin, vmax. (2) 使用max-width,而不使用width. (3) 对于一些元素,如img, object, video, iframe, 使用max-width: 100%. (4) 如果背景图片要完全覆盖容器,可以使用ba

JavaScript根据CSS的Media Queries来判断浏览设备的方法

CSS 部分 首先随便新建一个用来做判断的类,然后通过 Media Queries 来对这个类的 z-index 属性赋予不同的值.这个类仅作为 JavaScript 读取使用,所以需要将其移出屏幕窗口,让浏览者不可见以免引起意外情况. 作为演示,下面代码设置了四种设备状态:桌面普通版.小屏幕桌面版.平板电脑版和手机版. /* default state */ .state-indicator { position: absolute; top: -999em; left: -999em; z-

使用media来加载css

默认的,css被当做渲染时候必须加载的资源. 设备类型和设备询问允许我们设置一些css资源编程可选的 对于所有的css资源,无论是必须的还是可选的,都会被浏览器加载 The New York Times with CSSThe New York Times without CSS (FOUC) 上面显示了加载css和不加载css样式的效果,不加载css显示的页面同样被叫做 “Flash of Unstyled Content” (FOUC). 所有,页面的渲染必须需要DOM和CSSOM. css

Windows Media Foundation 音视频采集 小记

写在前面 我是个讲文明的人…… 不过有的时候实在忍不住了也要吐槽几句: 1. 我真是跟不上时代,到现在了还在研究 Windows 应用开发…… 咳: 2. DirectShow 是傻X!我只是想要获取 Camera 裸数据,尼玛却要让我学习神马各种 .ax, filter, graph... 相关资料少.又晦涩: 3. 在此祝愿 Windows XP 及其之前的版本早点退出历史舞台,这样 DirectShow 就不是必须的了! 音视频采集 Windows 7 以后, Media Foundati

响应式web设计之CSS3 Media Queries

开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备. 那么,Media Queries是如何工作的? 两种方式,一种是直接在link中判断设备的尺寸,然后引用不同的css文件: <link rel="stylesheet" type="text/css" href=