笔记丨Web丨CSS3丨（十四）终篇：补缺+响应式网页设计

Posted 2021-04-09 Hedon日常

有话说！

后台回复“CSS3-14”就可以获得本篇的“源代码”啦！

W

E

B

CSS3
（十四）响应式网页设计

Contents
1	设置鼠标指针的形状
2	媒体查询
3	选择器完整说明
4	响应式网页设计
5	4中综合例子拆解说明

01

设置鼠标指针的形状

属性：

cursor：value

值：

可参见该csdn篇：https://blog.csdn.net/weixin_44198965/article/details/100546009

示例1：

效果1：

02

媒体查询

Contents

1	应用说明
2	媒体类型
3	媒体特性
4	媒体查询设计使用@media
5	媒体查询设计使用<link>
6	媒体查询设计使用@import

01

应用说明

即针对不同输出工具套用不同的样式

一封html文件可能在不同的设备上使用——如PC、平板、ios或android手机。

如，在屏幕输出时使用sans-serif字体，打印机打印时使用serif字体，为有听觉障碍的终端用户设计使用voice-family字体等。

又如，电脑屏幕上设定较宽的窗口，而手机屏幕设计宽度或高度较窄的窗口。

02

媒体类型media types

03

媒体特性media features

04

使用@media方法

格式：

@media media-type and（media-feature）···~

例子：

更正：max-width:480px

更正：and后面必须有空格！

示例1：

效果1：

05

使用<link>元素

说明：

当需要读取外部媒体输出的样式表单时，就需要用到<link>元素了。

格式：

<link rel="stylesheet" type="text/css" media="媒体属性值" href="URL">

示例：

效果：

同上

06

使用@import方法

格式：

@import url(URL);

代码：

03

选择器完整说明

前面在CSS3（一）中讲过几个选择器，点击此处

这里太多选择器了，直接查阅菜鸟教程整理的就可以了~

https://www.runoob.com/cssref/css-selectors.html

04

响应式网页设计

说明：

这里举一个综合例子，展示同一个页面在手机、平板电脑、PC屏幕的不同显示效果。

viewpoint

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

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

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

说明：

①viewpoint告诉浏览器如何控制页面尺寸和比例

②width=device-width可以获得浏览器设备的宽度分辨率（pixel）

③initial-scale=1.0 可以设定在网页插入图案时的初始缩放比例

响应式网页设计原则：

①由于浏览器屏幕宽度是不固定的，所以不要采用固定宽度，应采用百分比来设置宽度。

②图像宽度不要大于浏览屏幕宽度，以免需水平滚动来浏览页面。

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

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

所以才有了上面对<meta>值的补充设置。

代码：

效果：

①PC大小时的显示效果

②平板电脑大小时的显示效果

③手机大小时的显示效果

05

上面例子的拆解说明

①头和尾的设计

在这个程序设计中，<header>或<footer>不论是在那一种浏览画面环境，它们的宽度皆是浏览宽度的100%。

②手机情况下导航栏也是跟手机宽度一样的

而平板和PC中就不同了

导览区样式表

文章区样式表

侧边栏样式表

往期作品：

参考资料：

①《HTML5+CSS王者归来》（洪锦魁）

② gif制作网站：www.gif5.net

③https://www.cnblogs.com/zheshiyigemanong/p/6793634.html

④ https://www.w3school.com.cn

⑤菜鸟教程

⑥https://blog.csdn.net/weixin_44198965/article/details/100546009

⑦www.runoob.com/cssref/css-selectors.html

愿你是那只刺猬，我予你柔软的拥抱，你予我鲜血淋漓的爱。

——余秋雨

制作人：Hedon