多媒体查询@media

定义

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

@media not|only mediatype and (expressions) {/* CSS代码写在这里 */
}/* 示例 *//* only去掉效果一样 */
@media only screen and (max-width: 640px) {    body{margin: 0;}
}

常用媒体类型	值
`all`	用于所有多媒体类型设备
`print`	用于打印机
`screen`	用于电脑屏幕，平板，智能手机等
`speech`	用于屏幕阅读器

常用特性	值
`width`	定义输出设备中的页面可见区域宽度
`height`	定义输出设备中的页面可见区域高度
`max-width`	定义输出设备中的页面最大可见区域宽度
`max-height`	定义输出设备中的页面最大可见区域高度
`max-device-width`	定义输出设备的屏幕最大可见宽度
`max-device-height`	定义输出设备的屏幕可见的最大高度
`orientation`	检测设备目前处于横向（值为`landscape`）还是纵向（值为`portrait`）状态
`aspect-ratio`	检测浏览器可视宽度和高度的比例。(例如：`aspect-ratio:16/9`)
`device-aspect-ratio`	检测设备的宽度和高度的比例
`color`	检测颜色的位数。（例如：`min-color: 32`就会检测设备是否拥有32位颜色）

使用

方法一：直接在link中判断设备的尺寸，然后引用不同的CSS文件：

<!-- 当屏幕的宽度大于等于400px的时候，应用 A.css -->
<link rel="stylesheet" type="text/css" href="A.css" media="screen and (min-width: 400px)">

方法二：另一种方式，即是直接写在 style 标签里或CSS文件中：

/*当屏幕尺寸小于600px时，应用下面的CSS样式*/
@media screen and (max-width: 600px) { body {    margin: 0;}
}

多媒体查询@media相关推荐

HTML引入媒体查询CSS,CSS3 多媒体查询
CSS3 多媒体查询 CSS2 多媒体类型 @media 规则在 CSS2 中有介绍,针对不同媒体类型可以定制不同的样式规则. 例如:你可以针对不同的媒体类型(包括显示器.便携设备.电视机,等等)设置 ...
CSS3——多媒体查询属性
多媒体查询语法 @media not|only mediatype and (expressions) { CSS-Code; } not: not是用来排除掉某些特定的设备的,比如 @media n ...
html读取媒体长度,用媒体查询media根据屏幕分辨率大小确定网页宽度
显示网页的终端屏幕分辨率大小不一,为了能使同一网页能在不同的终端中合适显示,CSS3 推出了媒体查询media.用媒体查询media能根据屏幕分辨率大小确定网页宽度,这主要在 CSS 文件中根据屏幕分 ...
html5移动端开发(rem和媒体查询@media)
css下:index.css @charset "utf-8"; body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fields ...
媒体查询@media query
@media query 媒体查询 @media (min-width:768px)小屏 (>=) @media (min-width:992px)中屏 @media (min-width:12 ...
移动开发—媒体查询(Media Query)
移动开发-媒体查询(Media Query) 1.使用@media,可以针对不同的媒体类型定义不同的样式 2.@media可以针对不同的屏幕尺寸设置不同的样式 3.当你重置浏览器大小的过程中,页面也会 ...
css3的媒体查询(Media Queries)
css3的媒体查询(Media Queries) 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesh ...
银行自助设备详细介绍（二）——多媒体查询机
上次简单对银行个人自助设备进行了分类说明.现在开始对每种设备作进一步分析说明. 涉及设备的硬件.软件结构以及相关的一系列知识. 多媒体查询机--顾名思义,就是一台多媒体电脑.主要用于完成非现金类银行个 ...
CSS3的媒体查询@media
CSS3的媒体查询@media 通过@media可以针对不同屏幕大小定义不同样式的网页,页面会根据浏览器长宽来渲染页面. 语法: @media mediaType and|not|only (medi ...

多媒体查询@media

定义

使用

多媒体查询@media相关推荐

最新文章

热门文章