购物车
登陆 / 注册
微信扫码登陆

推荐手册

CSS媒体查询(Media Queries)

CSS媒体查询(Media Queries)
编辑:前端控 前端控 更新时间:2019-03-23 10:12:32

CSS媒体查询

语法:

<media_query_list>:[<media_query>[',' <media_query>]*]?

<media_query>:[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*

<expression>:'('<media_feature>[:<value>]?')'

说明:

通过不同的媒体类型和条件定义样式表规则。

  • 媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。

  • 媒体查询的大部分媒体特性都接受minmax用于表达“大于或等于”和“小与或等于”。如:width会有min-width和max-width
  • 媒体查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML和XML中。

示例代码:

@media screen and (width:800px){ … }
@import url(example.css) screen and (width:800px);
<link media="screen and (width:800px)" rel="stylesheet" href="example.css" />
<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?>

媒体特性 Media Features

媒体特性取值接受min/max描述
width<length>yes定义输出设备中的页面可见区域宽度
height<length>yes定义输出设备中的页面可见区域高度
device-width<length>yes定义输出设备的屏幕可见宽度
device-height<length>yes定义输出设备的屏幕可见高度
orientationportrait | landscapeno定义'height'是否大于或等于'width'。值portrait代表是,landscape代表否
aspect-ratio<ratio>yes定义'width'与'height'的比率
device-aspect-ratio<ratio>yes定义'device-width'与'device-height'的比率。如常见的显示器比率:4/3, 16/9, 16/10
color<integer>yes定义每一组输出设备的彩色原件个数。如果不是彩色设备,则值等于0
color-index<integer>yes定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
monochrome<integer>yes定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
resolution<resolution>yes定义设备的分辨率。如:96dpi, 300dpi, 118dpcm
scanprogressive | interlaceno定义电视类设备的扫描工序
grid<integer>no用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值,1代表是,0代表否

兼容性:

浅绿 = 支持

红色 = 不支持

粉色 = 部分支持

支持版本\类型IEFirefoxSafariChromeOpera
版本6-845.1.71311.5
版本9
网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号