详细解读@meda媒体查询

简介: 详细解读@meda媒体查询

定义和使用

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

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

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

浏览器支持

表格中的数字表示支持 @media 规则的第一个浏览器的版本号。

RuleChrome IE FireFoxSafariOpera

@media

21

9

3.5

4.0

9

CSS 语法

@media mediatype and|not|only (media feature) {

CSS-Code;

}

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

媒体类型

值描述

all

用于所有设备

aural

已废弃。用于语音和声音合成器

braille

已废弃。 应用于盲文触摸式反馈设备

embossed

已废弃。 用于打印的盲人印刷设备

handheld

print

用于打印机和打印预览

projection

已废弃。 用于投影设备

screen

用于电脑屏幕,平板电脑,智能手机等。

speech

应用于屏幕阅读器等发声设备

tty

已废弃。 用于固定的字符网格,如电报、终端设备和对字符有限制的便携设备

tv

已废弃。 用于电视和网络电视

媒体功能

值描述

aspect-ratio

定义输出设备中的页面可见区域宽度与高度的比率

color

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

color-index

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

device-aspect-ratio

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

device-Height</td>

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

device-Width</td>

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

grid

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

Height</td>

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

max-aspect-ratio

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

max-color

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

max-color-index

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

max-device-aspect-ratio

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

max-device-Height</td>

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

max-device-Width</td>

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

max-Height</td>

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

max-monochrome

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

max-resolution

定义设备的最大分辨率。

max-Width</td>

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

min-aspect-ratio

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

min-color

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

min-color-index

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

min-device-aspect-ratio

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

min-device-Width</td>

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

min-device-Height</td>

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

min-Height</td>

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

min-monochrome

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

min-resolution

定义设备的最小分辨率。

min-Width</td>

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

monochrome

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

orientation

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

resolution

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

scan

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

Width</td>

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

下面来看一个例子:

<!DOCTYPE html

[/span>html lang="en"

[/span>head

[/span>meta charset="UTF-8"

[/span>title

[/span>style

body,

div,

span,

p {

margin: 0;

padding: 0;

border: 0 none;

font-size: 1em;

line-Height</span>: 1.5em;

font-family: 'Arial';

color: #414142;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

ul {

padding-left: 40px;

margin: 20px 0;

}

a {

text-decoration: none;

color: #D64078;

}

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

nav {

float: left;

Width</span>: 25%;

}

section {

margin-left: 25%;

}

}

@media screen and (max-width: 599px) {

nav li {

display: inline;

}

}

.ipsum {

color: #734161;

background-color: #eee;

}

.elem {

border: 3px solid #6AC5AC;

position: relative;

}

.elem-red {

border: 3px solid #D64078;

}

.elem-yellow {

border: 3px solid #FDC72F;

}

.label,

.endlabel {

position: absolute;

background-color: #6AC5AC;

line-Height</span>: 1em;

}

.elem-yellow > .label,

.elem-yellow > .endlabel {

background-color: #FDC72F;

}

.elem-red > .label,

.elem-red > .endlabel {

background-color: #D64078;

}

.elem-yellow p {

padding: 0 1em;

margin: 1em 0;

}

.label {

top: 0;

left: 0;

padding: 0 3px 3px 0;

}

.endlabel {

right: 0;

bottom: //代码效果参考:http://www.zidongmutanji.com/bxxx/257788.html

0;

padding: 3px 0 0 3px;

}

[/span>body

[/span>div class="container elem"

[/span>span class="label"div class="container">

[/span>nav class="elem elem-red"

[/span>span class="label"nav>

[/span>ul

[/span>li

]

[/span>a href="@media.html"

[/span>li

[/span>a href="@media.html"

[/span>li

[/span>a href="@media.html"

[/span>li

[/span>a href="@media.html"

[/span>li

[/span>a href="@media.html"

[/span>li

[/span>a href="@media.html"

[/span>span class="endlabel"/nav>

[/span>section class="elem elem-yellow"

[/span>

相关文章
|
7月前
|
开发框架 缓存 自然语言处理
HarmonyOS ArkTS声明式UI开发实战教程
本文深入探讨了ArkTS作为HarmonyOS生态中新一代声明式UI开发框架的优势与应用。首先对比了声明式与命令式开发的区别,展示了ArkTS如何通过直观高效的代码提升可维护性。接着分析了其核心三要素:数据驱动、组件化和状态管理,并通过具体案例解析布局体系、交互组件开发技巧及复杂状态管理方案。最后,通过构建完整TODO应用实战,结合调试优化指南,帮助开发者掌握声明式UI设计精髓,感受ArkTS的独特魅力。文章鼓励读者通过“破坏性实验”建立声明式编程思维,共同推动HarmonyOS生态发展。
298 3
|
小程序
Galacean Effects 2.0 带来了哪些新功能?
各位特效魔法师、创意小能手们,我们近期解锁了一系列超能力,或许会让你的创作如虎添翼,酷炫到飞起!✨🎉🎉
989 1
|
10月前
|
机器学习/深度学习 人工智能 自然语言处理
C++构建 GAN 模型:生成器与判别器平衡训练的关键秘籍
生成对抗网络(GAN)是AI领域的明星,尤其在C++中构建时,平衡生成器与判别器的训练尤为关键。本文探讨了GAN的基本架构、训练原理及平衡训练的重要性,提出了包括合理初始化、精心设计损失函数、动态调整学习率、引入正则化技术和监测训练过程在内的五大策略,旨在确保GAN模型在C++环境下的高效、稳定训练,以生成高质量的结果,推动AI技术的发展。
298 10
|
关系型数据库 分布式数据库 数据库
【阿里云云原生专栏】云原生时代的数据库选型:阿里云RDS与PolarDB对比分析
【5月更文挑战第24天】阿里云提供RDS和PolarDB两种数据库服务。RDS是高性能的在线关系型数据库,支持MySQL等引擎,适合中小规模需求;而PolarDB是分布式数据库,具备高扩展性和性能,适用于大规模数据和高并发场景。RDS与PolarDB在架构、性能、弹性伸缩、成本等方面存在差异,开发者应根据具体需求选择。示例代码展示了如何通过CLI创建RDS和PolarDB实例。
1353 0
|
域名解析 缓存 负载均衡
Nginx正向代理域名的配置
Nginx正向代理域名的配置
1072 8
|
JavaScript 网络架构
vue路由跳转之【编程式导航与传参】
vue路由跳转之【编程式导航与传参】
uniapp 添加自定义图标
uniapp 添加自定义图标
534 0
|
JSON 资源调度 JavaScript
如何在 Node.js 项目中使用 Prettier 进行代码格式化
如何在 Node.js 项目中使用 Prettier 进行代码格式化
587 0
如何在 Node.js 项目中使用 Prettier 进行代码格式化
|
JavaScript PHP 索引
通过url获取图片尺寸的几种方法:JS和php
首先是js的方法,通过new一个Image对象,设置src属性,并监听complete和onload事件,图片加载完成后输出图片的宽度和高度 function checkPicurl(url){ var img = new Image();img.
3394 0
|
监控 容灾 测试技术
如何保障线上产品质量?
如何保障线上产品质量?
452 0