一、设置鼠标指针形状
使用 cursor 属性可以更改鼠标指针样式。
语法
1 | 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。
1 | @media mediatype and | not | only (media feature) { |
4. 媒体查询时使用 <link>
针对不同的媒体使用不同 stylesheets :
1 | <link rel="stylesheet" media="mediatype and | not | only (media feature)" href="mystylesheet.css"> |
三、响应式（RWD）网页设计
1. 设计响应式网页的基本原则
对于响应式网页而言，主要要掌握的原则如下：
使用HTML设计网页内容。
为手机倒览屏事设计CSS样式表，让网页可在手机屏幕完美呈现。
为平板电脑浏览屏幕设计CSS样式表，让网页可在平板屏幕完美呈现。
为PC屏幕设计CSS样式表，让网页可在PC屏幕完美呈现。
2.viewport
viewport 指的是屏事分辨率，会因为所使用的设备而有不同的值。
在设计响应式网页时，必须在 <meta> 元素内进行下列设定。
1 | <meta name="viewport" content="width=device-width", "initial-scale=1.0"> |
<meta>的值viewport将告诉浏览器如何控制页面尺寸和比例。- width=device-width, 可以获得浏览设备的宽度分辨率(pixel)。
- initial-scale=1.0, 可以设定在网页插入图案时的初始缩放比例。
设计响应式网页有下列原则:
由于浏览屏幕宽度是不固定的， 所以不要采用固定宽度，应采用百分比来设置宽度。5图像宽度不要大于浏览屏幕宽度，以免需水平滚动来浏览网页。
由于每一种设备的分辨率不同，设计网页时不能只考虑种屏幕宽度。
使用绝对值定位要特别小心， 特别是大尺寸的绝对值，若不小心，就会落到浏览显示区外。