文档章节

CSS3 @media 查询

持枪的绅士
 持枪的绅士
发布于 2016/06/02 18:50
字数 924
阅读 9
收藏 0

实例

如果文档宽度小于 300 像素则修改背景演示(background-color):

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

定义和使用 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

CSS 语法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

你也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

媒体类型

  1. all 用于所有设备
  2. print 用于打印机和打印预览
  3. screen 用于电脑屏幕,平板电脑,智能手机等
  4. speech 应用于屏幕阅读器等发声设备

媒体功能 aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率

color 定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0

color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0

device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。

device-height 定义输出设备的屏幕可见高度。

device-width 定义输出设备的屏幕可见宽度。

grid 用来查询输出设备是否使用栅格或点阵。

height 定义输出设备中的页面可见区域高度。

max-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。

max-color 定义输出设备每一组彩色原件的最大个数。

max-color-index 定义在输出设备的彩色查询表中的最大条目数。

max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。

max-device-height 定义输出设备的屏幕可见的最大高度。

max-device-width 定义输出设备的屏幕最大可见宽度。

max-height 定义输出设备中的页面最大可见区域高度。

max-monochrome 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。

max-resolution 定义设备的最大分辨率。

max-width 定义输出设备中的页面最大可见区域宽度。

min-aspect-ratio 定义输出设备中的页面可见区域宽度与高度的最小比率。

min-color 定义输出设备每一组彩色原件的最小个数。

min-color-index 定义在输出设备的彩色查询表中的最小条目数。

min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。

min-device-width 定义输出设备的屏幕最小可见宽度。

min-device-height 定义输出设备的屏幕的最小可见高度。

min-height 定义输出设备中的页面最小可见区域高度。

min-monochrome 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数

min-resolution 定义设备的最小分辨率。

min-width 定义输出设备中的页面最小可见区域宽度。

monochrome 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0

orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。

resolution 定义设备的分辨率。如:96dpi, 300dpi, 118dpcm

scan 定义电视类设备的扫描工序。

width 定义输出设备中的页面可见区域宽度。

更多实例

@media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
}

本文转载自:http://www.runoob.com/cssref/css3-pr-mediaquery.html

持枪的绅士
粉丝 7
博文 10
码字总数 6993
作品 0
嘉兴
私信 提问
CSS——让这些“展示”有更好的扩展性——媒体查询

前言: 实际上在很早之前,CSS 就支持媒体查询了:例如,页面有些部分需要在打印的时候隐藏或者变大,这时候可以使用 media 使某些 style 只在打印的时候生效。 而 CSS3 的 Media Queries 的...

itsOli
05/14
0
0
iPhone6&iPhone6 Plus CSS3 Media Queries

CSS3 Media Queries查询 iPhone6&iPhone6 Plus CSS3 Media Queries @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { /iPh......

豆花饭烧土豆
2016/03/24
27
0
响应式设计之媒体查询

今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。 准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 这段代码的几个...

独孤蝈蝈
2016/10/25
23
0
【CSS3初探之Media Queries】终于完成了的CSS3,我们来个终章总结!

前言 无论如何,学到这里,我可以自豪的告诉自己,我HTML5与CSS3学完了,不管我现在还记得住多少,我确确实实将他们学完了,还做了不少demo。 回想几个月前,我一直在纠结自己应该学习HTML5...

范大脚脚
2017/12/14
0
0
html5shiv.js和respond.min.js

做页面常用的东西,写这里用的时候省点去找了。。。 html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题。 respond.min:让不支持css3 Media Query的浏览器包括I...

刘元兴
2017/05/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

从零基础到拿到网易Java实习offer,我做对了哪些事

作为一个非科班小白,我在读研期间基本是自学Java,从一开始几乎零基础,只有一点点数据结构和Java方面的基础,到最终获得网易游戏的Java实习offer,我大概用了半年左右的时间。本文将会讲到...

Java技术江湖
昨天
4
0
程序性能checklist

程序性能checklist

Moks角木
昨天
6
0
VUE 计算属性

本文转载于:专业的前端网站▶VUE 计算属性 1、示例代码 <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title>vue示例</title> </hea......

前端老手
昨天
5
0
快速搭建LNMT平台和环境部署 Tomcat详解

Tomcat部署的基本概念 1. CATALINA_HOME与CATALINA_BASE分别指什么?     CATALINA_HOME指的是Tomcat的安装目录     bin:\\Tomcat一些脚本存放目录,比如启动脚本startup.bat/start...

网络小虾米
昨天
6
0
float浮动

float浮动 float浮动概念及原理: 文档流:文档流是文档中可显示对象在排列时所占用的位置。 加浮动的元素,会脱离文档流,会沿父容器靠左或靠右排列,如果之前已经有浮动的元素,会挨着浮动...

studywin
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部