响应式布局——@media详解
来源:互联网 发布:chrome浏览器 windows 编辑:程序博客网 时间:2024/06/05 07:47
语法:
@media:<media_query_list>
<media_query_list>:[<media_query>[','<media_query>]*]?
<media_query>:[only | not]?<media_type> [and<expression>]* | <expression> [and <expression>]*
<expression>:'('<media_feature>[:<value>]?')'
- <media_type>:
- 指定设备类型。媒体类型包括:参阅媒体类型。(CSS2)
- 媒体类型及功能:http://www.runoob.com/cssref/css3-pr-mediaquery.html
- <expression>:
- 指定媒体查询使用的媒体特性。这类似于CSS属性,如:max-width:960px。(CSS3)
说明:
指定样式表规则用于指定的媒体类型和查询条件。
IE8及以下只能实现CSS2中的部分,即只可以设置媒体类型。
媒体查询可以被用在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 all and (width:1024px)
{
body{color:#f00;
}
@media all and (device-height:800px){ … }
2.@media all and (orientation:landscape){ … }
3.@media all and (device-aspect-ratio:16/10){ … }
4.@media all and (min-color:1){ … }
5.@media all and (monochrome:0){ … }
6.@media all and (grid:0){ … }
@media screen and这是一种最常见的写法,后面跟上限定的屏幕尺寸
带all 跟 only的写法
- @media all and (min-width:xxx) and (max-width:xxx){
- /*这段查询的all是针对所有设备(有些设备不一定是屏幕,也许是打字机,盲人阅读器)*/
- }
- @media only screen and (min-width:xxx) and (max-width:xxx){
- /*上面针对了所有设备,这段是只(only)针对彩色屏幕设备*/
- }
媒体类型:
all 用于所有设备
aural 已废弃。用于语音和声音合成器
braille 已废弃。 应用于盲文触摸式反馈设备
embossed 已废弃。 用于打印的盲人印刷设备
handheld 已废弃。 用于掌上设备或更小的装置,如PDA和小型电话
print 用于打印机和打印预览
projection 已废弃。 用于投影设备
screen 用于电脑屏幕,平板电脑,智能手机等。
speech 应用于屏幕阅读器等发声设备
tty 已废弃。 用于固定的字符网格,如电报、终端设备和对字符有限制的便携设备
tv 已废弃。 用于电视和网络电视
媒体功能:
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详解
- @media 响应式布局
- media响应式布局
- CSS——响应式布局之@media
- 响应式设计布局之@media用法详解(转)
- media响应式布局模版
- 浅谈CSS响应式布局——media query(媒介查询)
- CSS3 Media Queries(响应式布局)
- @media screen实现响应式布局例子
- Media Queries实现响应式布局
- 响应式布局解决方案之Media Query
- css3 @media 实现响应式布局
- CSS3中的响应式布局 @media查询
- 响应式布局Media Query 的使用方法
- CSS3 Media Query实现响应式布局
- 响应式布局三种@media
- CSS3 Media Queries实现响应式布局
- CSS Media Queries响应式布局
- 抽象类和接口
- 布局管理
- iOS开发 支持https请求以及https请求的抓包
- Eclipse导入maven没有maven选项
- python深copy与浅copy的区别
- 响应式布局——@media详解
- React+webpack开发环境的搭建
- 【SSH】(一)三大框架整合
- 21天精通java基础之Day13Map接口
- 常见Python运行错误
- 前端性能优化
- android app唤醒手机qq,发起即时对话
- Leetcode #541 Reverse String II
- Binary Tree Maximum Path Sum