码迷,mamicode.com
首页 > 其他好文 > 详细

十、Media Queries相关样式

时间:2018-06-24 13:01:12      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:not   小尺寸   ogr   打印   大于   width   pre   nbsp   css3   

一、根据浏览器的窗口大小来选择使用不同的样式

在css中,与媒体相关的样式定义是从css2开始的。css2中定义了各种媒体类型,包括显示器、便携设备、电视机等。

css3中加入了Media Queries模块,该模块允许添加媒体查询(media querise)表达式,来指定媒体类型,然后根据媒体类型来选择应该使用的样式。

二、在iphone中的显示

即使在页面中已经写好了页面在小尺寸窗口中运行时的样式,iphone中的safari浏览器也不会使用这个样式,而是选择窗口宽度为980px时所使用的样式。在这种情况下,可以利用<meta>标签在页面中指定safari浏览器在处理本页面时按照多少像素的窗口宽度来进行,使用方法如下:

<meta name="viewport" content="width=600px" />  //加入这段代码后,Safari浏览器将窗口宽度按照600px来处理

三、Media Queries的使用方法

@madia 设备类型 and (设备特征){样式代码}

可以指定的值和该值所代表的设备类型:

all:所有设备

screen:电脑显示器

print:打印用纸或打印预览视图

handheld:便携设备

tv:电视机类型的设备

speech:语音和音频合成器

braille:盲人用点子法触觉回馈设备

embossed:盲文打印机

projection:各种投影设备

tty:使用固定密度字母栅格的媒介,比如电传打字机和终端

 

13种设备特性的说明

width:浏览器窗口的宽度

height:浏览器窗口的高度

device-width:设备屏幕分辨率的宽度值

device-height:设备屏幕分辨率的宽度值

orientation:不允许使用min/max前缀,浏览器窗口的方向是纵向还是横向。当窗口的高度值大于等于宽度值时,该特性值为portait,否则为landscape。

aspect-ratio:浏览器窗口的纵横比,比例值为浏览器窗口的宽度值/高度值

device-aspect-ratio:屏幕分辨率的纵横比

color:设备使用多少位的颜色值,如果不是彩色设备,值为0

color-index:色彩表中的色彩数

monochrome:单色帧缓冲器中每像素的字节数

resolution:设备的分辨率

scan:电视机类型设备的扫描方式。progressive表示逐行扫描,interlace表示隔行扫描

grid:设别是基于栅格还是基于位图。基于栅格睡值为1,否则为0。

 

关键字:

and:指定当某种设备类型的某种特性的值满足某个条件时所使用的样式。

only:

not:表示对后面的表达式执行取反操作。

十、Media Queries相关样式

标签:not   小尺寸   ogr   打印   大于   width   pre   nbsp   css3   

原文地址:https://www.cnblogs.com/LLMjiayou7/p/9220116.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!