CSS3—鼠标指针形状|响应式网页设计

市民 0 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. 设计响应式网页的基本原则

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

使用HTML设计网页内容。
为手机倒览屏事设计CSS样式表，让网页可在手机屏幕完美呈现。
为平板电脑浏览屏幕设计CSS样式表，让网页可在平板屏幕完美呈现。
为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, 可以设定在网页插入图案时的初始缩放比例。

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

由于浏览屏幕宽度是不固定的，所以不要采用固定宽度，应采用百分比来设置宽度。5图像宽度不要大于浏览屏幕宽度，以免需水平滚动来浏览网页。
由于每一种设备的分辨率不同，设计网页时不能只考虑种屏幕宽度。
使用绝对值定位要特别小心，特别是大尺寸的绝对值，若不小心，就会落到浏览显示区外。

本文地址：https://blog.csdn.net/qq_43405938/article/details/109565963

黄山市民网：https://www.huangshanshimin.com/