标签: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:表示对后面的表达式执行取反操作。
标签:not 小尺寸 ogr 打印 大于 width pre nbsp css3
原文地址:https://www.cnblogs.com/LLMjiayou7/p/9220116.html