十Media Queries相关样式

Posted 2020-11-20 llmjiayou7

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

在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：表示对后面的表达式执行取反操作。