CSS3—鼠标指针形状|响应式网页设计
程序员文章站
2022-06-19 16:10:13
一、设置鼠标指针形状使用 cursor 属性可以更改鼠标指针样式。语法cursor: value;二、媒体查询1. 媒体类型下列是CSS中定义的媒体类型(media types).all用于所有的媒体设备。aural用于语音和音频合成器。braille用于盲人用点字法触觉回馈设备。embossed用于分页的盲人用点字法打印机。handheld用于小的手持的设备。print用于打印机。projection用于方案展示,比如幻灯片。screen用于电脑显示器。...
一、设置鼠标指针形状
使用 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