CSS3笔记(4)——鼠标指针形状|响应式网页设计

一、设置鼠标指针形状

使用 cursor 属性可以更改鼠标指针样式。

语法

cursor: value;

二、媒体查询

1. 媒体类型

下列是CSS中定义的媒体类型(media types).

• all 用于所有的媒体设备。
• aural 用于语音和音频合成器。
• braille 用于盲人用点字法触觉回馈设备。
• embossed 用于分页的盲人用点字法打印机。
• handheld 用于小的手持的设备。
• print 用于打印机。
• projection 用于方案展示，比如幻灯片。
• screen 用于电脑显示器。
• tty 用于使用固定密度字母栅格的媒体，比如电传打字机和终端。
• tv 用于电视机类型的设备。

CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想： 取代了查找设备的类型，CSS3 根据设置自适应显示。

媒体查询可用于检测很多事情，例如：

• viewport(视窗) 的宽度与高度
• 设备的宽度与高度
• 朝向 (智能手机横屏，竖屏) 。
• 分辨率

目前很多针对苹果手机，Android 手机，平板等设备都会使用到多媒体查询。

2. 媒体特性

下列是CSS中定义的媒体特性(media fatures).

• color: 输出设备(屏幕)每个色彩的位数(bits)。
• color index: 输出设备(屏幕)可以输出的色彩数量。
• height: 浏览器窗口的高度。
• deic-height: 建议弃用，输出设备(屏幕)的高度。
• widh: 浏览器窗口的宽度。
• devicc-width: 建议弃用，输出设备(屏幕)的宽度。
• aspect-ratio: 浏览器窗口宽度和高度的比。
• deie-spet-rationo: 建议弃用，输出设备(屏幕)宽度和高度的比。
• monochrome: 国白屏幕每个色彩的位数。
• resoluion: 输出设备(屏幕)的屏都分辨事，单位是dpi或dpcm。

上述所有属性皆可以加上前级词“min-""或“max-“表示“最小值”或“最大值”，例如“min-widh"表示浏览器窗口的最小宽度。

• orientation: 输出设备(屏幕)的方向，可能值是landscape (水平)或portait (垂直)。
• scan: 输出设备(屏幕)的扫描方式，可能值是interlace (交错式)或progressive (循序式)。
• grid: 输出设备(屏幕)的扫描方式，可能值是1 (网格grid)或0 (点阵bimap)。

3. 媒体查询 @media

语法
多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。

@media mediatype and | not | only (media feature) {
    CSS-Code;
}

4. 媒体查询时使用 <link>

针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and | not | only (media feature)" href="mystylesheet.css">

三、响应式（RWD）网页设计

1. 设计响应式网页的基本原则

对于响应式网页而言，主要要掌握的原则如下：

1. 使用HTML设计网页内容。

2. 为手机浏览屏事设计CSS样式表，让网页可在手机屏幕完美呈现。

3. 为平板电脑浏览屏幕设计CSS样式表，让网页可在平板屏幕完美呈现。

4. 为PC屏幕设计CSS样式表，让网页可在PC屏幕完美呈现。

2.viewport

viewport 指的是屏事分辨率，会因为所使用的设备而有不同的值。

在设计响应式网页时，必须在 <meta> 元素内进行下列设定。

<meta name="viewport" content="width=device-width", "initial-scale=1.0">

• <meta> 的值viewport将告诉浏览器如何控制页面尺寸和比例。
• width=device-width, 可以获得浏览设备的宽度分辨率(pixel)。
• initial-scale=1.0, 可以设定在网页插入图案时的初始缩放比例。

设计响应式网页有下列原则:

1. 由于浏览屏幕宽度是不固定的， 所以不要采用固定宽度，应采用百分比来设置宽度。5图像宽度不要大于浏览屏幕宽度，以免需水平滚动来浏览网页。

2. 由于每一种设备的分辨率不同，设计网页时不能只考虑种屏幕宽度。

3. 使用绝对值定位要特别小心， 特别是大尺寸的绝对值，若不小心，就会落到浏览显示区外。