<>以前响应式布的局
Media Query 的使用方法
在上例中,,我们使用Media 查询来根据3种不同尺寸的窗口使用3种不同的样式。通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和“小与或等于”。如:宽度会有min-width和max-width媒体查询可以被用在CSS中的@media和@ import规则上,也可以被用在HTML和XML中。通过这个标签属性,我们可以很方便的在不同的设备下实现丰富的界面,特别是移动设备,将会运用更加的广泛。媒体查询能够获取的值如下:
设备的宽和高设备宽度,device-heigth显示屏幕/触觉设备。
渲染窗口的宽和高宽度,heigth显示屏幕/触觉设备。
设备的手持方向,横向还是竖向取向(肖像| lanscape)和打印机等。
画面比例长宽比点阵打印机等。
设备比例device-aspect-ratio——点阵打印机等。
对象颜色或颜色列表颜色,色指数显示屏幕。
设备的分辨率分辨率。
语法结构及用法
媒体查询有两种使用方式,,一种是在CSS样式中内嵌“@media”,在同一个CSS中通过不同窗口编写不同的样式去选择又是;另一种是使用外部样式表的引用,,在@ import和链接中使用“@media”,根据不同的窗口大小选择对应的样式文件。这两种方式的使用方法是一样的.Media 查询的使用方法如下所示:
@media 设备类型,only (选取条件),,not (选取条件),,以及,(设备特性),设备二,{,样式代码,}
在CSS3中的Media 查询模块中支持对外部样式表的引用,,使用方法类型如下代码:
@import url (color.css), screen 以及(min-width: 1000 px);,,,,,,,,,,,,,,,,/*使用@ import导入css文件*/或:
& lt; link rel="样式表",type=" text/css ",媒体=皁nly screen 以及(max-width: 480 px) only screen 以及(max-device-width: 480 px) ", href=" https://www.yisu.com/zixun/link.css ", rel=" external nofollow”,/祝辞,,,/*使用链接导入外部css文件*/简写:
& lt; link rel="样式表",type=" text/css ",媒体=皊creen 以及(max-width: 480 px),, href=" https://www.yisu.com/zixun/link.css ",/比;
上面使用中只可省略,限定于计算机显示器,第一个条件max-width是指渲染界面最大宽度,第二个条件max-device-width是指设备最大宽度。在样式表中内嵌@media的代码示例如下所示:
@media screen (min-device-width: 1024像素),以及(max-width: 989 px), screen 以及(max-device-width: 480 px), (max-device-width: 480像素),以及(方向:景观),(min-device-width: 480像素),以及(max-device-width: 1024像素),以及(方向:画像),{,样式代码,}
简写:
@media screen 以及(max-width: 640 px),,{,样式代码,}
在上面的示例代码中,设置了电脑显示器分辨率(宽度)大于或等于1024 px(并且最大可见宽度为989 px);屏宽在480 px及其以下手持设备,屏宽在480 px以及横向(即480尺寸平行于地面)放置的手持设备,屏宽大于或等于480 px小于1024 px以及垂直放置设备的css样式。从上面的例子可以看的出,字符间以空格相连,选取条件包含在小括号内,样式代码为兼容设置的样式表,包含在中括号里面只有(限定某种设备,可省略),和(逻辑与),而不是(排除某种设备)为逻辑关键字,多种设备用逗号分隔,这一点继承了css基本语法。
可用的设备类型
在上面的语法中,例如在CSS中嵌入“@media”的方式,,开头必须书写“@media”,然后指定设备类型(上例使用屏幕代表电脑显示器). CSS中定义了10种设备类型,可以指定的值与该值所代表的设备类型如表1所示:
表1-20 在Media 查询中可以指定的值与该值所代表的设备类型
可以指定的值设置类型
所有的所有设备
盲文盲文,即盲人用点字法触觉回馈设备
压花盲文打印机
手持手持的便携设备
文打印档打印用纸或打印预览视图模式
投影各种投影设备
屏幕彩色电脑显示器屏幕
演讲语言和音频合成器
tty固定字母间距的网格的媒体,比如电传打字机和终端
电视电视机类型的设备
可用的设备特性参数
通过设备类型可以区分使用的设备,再通过设备特性参数来设置同一设备的不同型号,例如,通过设备类型指定电脑显示器,,再通过设备特性参数指用多大屏幕的显示器。设备特性的书写方式与样式的书写方式很相似,,分为两个部分,当中由冒号分割,,冒号前书写设备的某种特性,,冒号后书写该特性的具体值。例如“(min-width: 320 px) " . CSS中的设置特性共有13种,是一个类似于CSS属性的集合。但与CSS属性不同的是,大部分设备特性的指定接受最?最大的前缀,,用来表示大于等于或小于等于的逻辑,以此避免使用“& lt;”和“在”这些字符。对于这13种设备特性参数的说明如表21所示:
表1-21 13种设备特性的说明
特性可指定值可用媒体类型是否接受
最?最大前缀特性说明
宽度带单位的长度值
例如:640 px视觉屏幕/触摸设备允许定义输出设备中的页面可见区域宽度(单位一般为px),即浏览器窗口的宽度
heigth带单位的长度值
例如:320 px视觉屏幕/触摸设备允许定义输出设备中的页面可见区域高度(单位一般为px),即浏览器窗口的高度
设备宽度带单位的长度值
例如:640 px视觉屏幕/触摸设备允许定义输出设备的屏幕可见宽度(单位一般为px),即设备屏幕分辨率的宽度值
device-heigth带单位的长度值
例如:320 px视觉屏幕/触摸设备允许定义输出设备的屏幕可见高度(单位一般为px),,即设备屏幕分辨率的高度值
取向只能指定两个值:
portrait 或,景观位图介质类型不允许浏览器窗口的方向是纵向还是横向,,当窗口商度大于等于宽度值是该特性值为一张图(横向),否则为景观(竖向)
比例比例值
例如16/9位图介质类型允许定义“宽度”与“高度”的比率,即浏览器的长宽比
device-aspect-ratio比例值
例如16/9位图介质类型允许定义“设备宽度”与“device-height”的比率,即设备屏幕长宽比。如常见的显示器比率:4/3,16/9、16/10
颜色整数值视觉媒体允许设备使用多少位的颜色值,如果不是彩色设备,则值等于0
色指数整数值视觉媒体允许色彩表中的色彩数
单色整数值视觉媒体允许定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
分辨率分辨率值
例如300 dpi位图介质类型允许定义设备的分辨率。如:96 dpi, 300 dpi, 118 dpcm
扫描只能指定两个值:
progressive 或交错电视类不允许定义电视类设备的扫描方式,,逐步逐行扫描,隔行隔行扫描
网格只能指定两个值:
0,或1栅格设备不允许用来查询输出设备是否使用栅格或基于位图。1代表是,0代表否
可以使用,关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式,,例如以下语句指定了当设备窗口宽度小于640 px时所使用的样式:
@media screen 以及(max-width: 640 px),{,样式代码,}
可以使用多条语句来将同一个样式应用于不同的设备类型和设备特性中,,指定方式类似如下所示:
@media handheld 以及(min-width: 360 px), screen 以及(max-width: 480 px),{,样式代码,}
可以在表达式中加不上关键字或只关键字,,不是关键字表示对后面的表达式执行取反操作,,书写方法类似如下所示:/*,样式代码将被使用在除便携设备之外的其他设备或非彩色便携设备中,*/@media not handheld 以及(颜色),{,样式代码,}/*,样式代码将被使用在非彩色设备中,*/@media all 以及(not 颜色),{,样式代码,}
使用只关键字的作用是让那些不支持Media 但查询是能够读取Media 类型的设备的浏览器将表达式的样式隐藏起来只例如:
@media only screen 以及(颜色),{,样式代码,}
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
