定义css设备类型-Media Queries图表简介及使用方法

移动时代是任何网页设计师和开发者不可忽略的一个时代,现在我设计的页面有时会在电脑大屏幕上或者移动小屏幕上显示。如何让同一个网站同时适应完全不同尺寸的屏幕,CSS3完美地解决了这些问题。在CSS2.1版本时候,我们曾经为网站设计不同的CSS样式文件,如打印样式表文件,手机样式文件,电脑样式文件等等,css3提出的MediaQueries解决了这些问题。
CSS3的MediaQueries可以帮助设计师获取以下数据

1.浏览器的窗口的宽度和高度,
2.设备的宽和高;
3.设备的手持方面,横向还是竖向;
4.分辨率;

到目前为止,MediaQueries模块得到了Firefox浏览器、Safari浏览器、Chrome浏览器以及Opera浏览器的支持。
MediaQueries的使用方法
@media设备类型and(设备特性){样式代码}
在代码的开头必须要写"@media",然后制定设备类型。css中定义了
Media Types
媒体类型
CSS Version
版本
Compatibility
兼容性
Description
简介
allCSS2所有浏览器用于所有媒体设备类型
auralCSS2Opera用于语音和音乐合成器
brailleCSS2Opera用于触觉反馈设备
handheldCSS2Chrome,Safari,Opera用于小型或手持设备
printCSS2所有浏览器用于打印机
projectionCSS2Opera用于投影图像,如幻灯片
screenCSS2所有浏览器用于计算机显示器
ttyCSS2Opera用于使用固定间距字符格的设备。如电传打字机和终端
tvCSS2Opera用于电视类设备
embossedCSS2Opera用于凸点字符(盲文)印刷设备

设备特性的书写放手与样式的书写方式很相似,分为两个部分,当中有冒号分割,冒号前书写设备的某种特性,冒号后书写该特性的具体值
对于这13种设备特性的说明如下表
特性可指定的值是否允许使用min/max前缀特性说明
width带单位的长度数值允许浏览器窗口的宽度
height带单位的长度数值允许浏览器窗口的高度
device-width带单位的长度数值允许设备屏幕分辨率的宽度值
device-height带单位的长度数值允许设备屏幕分辨率的高度值
orientation只能指定两个值:portrait或landscape不允许浏览器窗口的方向是纵向还是横向,当窗口的高度值大于等于高度值时,该特性值为portrait,
aspect-ratio比例值,例如:16/9允许浏览器窗口的纵横比,比例值为浏览器窗口的宽度值/高度值
device-aspect-ratio比例值,例如:16/9允许设备屏幕分辨率的纵横比,比例值为设备屏幕分辨率的宽度值/高度值
color整数值允许设备使用多少位的颜色值,如果不是彩色设备,该值为0
color-index整数值允许色彩表中的色彩数
monochrome整数值允许单色帧缓冲器中每像素的字节数
resolution分辨率值,譬如300dpi允许设备的分辨率
scan只能指定两个值:progressive或interlace不允许电视机类型设备的扫描方式,progressive表示逐行扫描,interlace表示隔行扫描
grid只能指定两个值:0或1不允许设备是基于栅格还是基于位图。基于栅格时该值为1,否则该值为0

使用and关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式,例如:
@mediascreenand(max-width:639px;)

设备特性的指定值接受min/max的前缀,用来表示大于或者小于等于的逻辑,以此避免使用<或者>这些字符。 



viewport设置适应移动设备屏幕大小 

viewport:允许开发者创建一个虚拟窗口并自定义其窗口的大小或缩放功能

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />

代码中的content属性可以设置如下6种不同参数

Media Queries如何工作

1、定义当前屏幕可视区域的宽度最大值是600像素

<link href="small.css" rel="stylesheet"  media="screen and(max-width:600px)"/>

那么small.css怎样写的呢

@media screen and (max-width:600px) {
    .demo {
        background-color:red;
    }
}

2、定义当前屏幕可视区域的宽度长度在600到900像素之间

<link href="small.css" rel="stylesheet"  media="screen and(min-width:600px) and(max-width:900px)"/>
@media screen and (min-width:600px) and (max-width:900px) {
    .demo {
        background-color: red;
    }
}

3、当移动屏幕处于纵向(portrait)模式下时,应用portrait样式文件,当移动设备处于横向(landscape)模式下,应用landscape样式文件

    <link href="protrait.css" rel="stylesheet"  media="all and(orientation:portrait)"/>
    <link href="landscape.css" rel="stylesheet"  media="all and(orientation:landscape)"/>

 

Media Queries语法总结

语法格式如下图所示:

1、使用Media Queries样式模块时都必须以“@media”方式开头

2、media_query表示查询关键定,比如说not only and 等等

  •   not表示对后面的样式表达式执行取反操作
  •   only让不支持Media Queries的设备但能读取Media Type类型的浏览器忽略这个样式,对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的浏览器会忽略only关键字并直接根据页面的表达式应用样式 文件

3、media_type 指定设备类型(也称媒体类型)

4、media_feature定义css中的设备特征  

media_type设备类型一览表

media_feature设备特征一览表

大部分设备特征都允许接受min/max的前缀


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值