属性值	用途
screen	默认值；指出样式表所配置的是典型浏览器窗口样式，用于在彩色计算机显示器上显示
print	指出样式表所配置的是提供打印输出的样式
handheld	表示样式表所配置的是在手持移动设备上的显示样式。

打印样式设置方式

隐藏非必要的内容

这是常见的做法，以防止打印输出横幅广告、导航或其他无关的领域。使用display:none;这一样式声明来隐藏不需要打印输出的页面内容。

配置用于打印输出的字体大小和颜色

在打印样式表中使用pt单位来设置字体大小，这样可以更好地控制打印输出文本。如果预计有很多人经常打印你的页面，你也可以考虑将文本颜色配置为黑色、背景颜色配置为白色。大多数浏览器会将背景颜色和背景图像默认设置为防止打印，你可以在打印样式表中将background-image属性设置为none，这样也能实现背景图像不被打印输出的效果。

控制分页符

使用CSS中page-break-before或page-break-after属性来控制打印分页。这些属性中得到良好支持的包括always（根据设定的是之前还是之后，分页符总是会起效）、avoid（如果可能，设定分页符将发生在元素之前或之后）以及auto（默认值）。

打印超链接的URL地址

利用CSS技术可以让href属性的值被打印出来，有两种CSS编码方法：CSS伪元素和CSS内容属性。CSS伪元素的目的是将某种类型应用于其选择器。下表列出了伪元素和它们的作用。

伪元素	作用
:after	在指定元素后插入生成的内容。用content属性来配置所生成的内容
:before	在指定元素前插入生成的内容。用content属性来配置所生成的内容
:first-letter	用来指定元素第一个字母的样式
:first-line	用来指定选择器第一行的样式

我们将结合CSS content属性和:after、:before这两个伪元素来生成内容。content属性attr(X)函数功能很有用，它可以返回给定的HTML属性值。该功能即可实现超链接URL（也即href属性的值）的打印输出。使用引号将附加文本或括号等字符包含起来。示例代码如下：

aside a:after { content: " (" attr(href) ") "; }

2、设计显示于移动设备上的网页

移动网页设计注意事项

屏幕尺寸小。减少页眉区域的尺寸以适应小屏幕显示。
低带宽（连接速度低）。
字体、颜色和媒体问题。使用通用字体，文本和背景颜色对比良好。
控制不便，有限的处理器和内存。移动网站使用单栏式页面布局，方便用tab键控制标签切换，cumokongzhi触摸控制也容易。页面主要内容是文本，使移动浏览器能快速呈现。
功能。直接在页眉下方显示指向常用站点功能的超链接。提供搜索功能。

优化移动网页布局

只限一个方向的滚动。
使用标题元素。
使用列表来组织信息。
避免使用表格，因为表格在移动设备上显示时通常会引起水平与垂直方向的滚动。
为表单控件设置标签。
在样式表中不用像素单位。
在样式表中避免使用绝对定位。
隐藏对于移动用户来说不必要的内容。

为移动用户优化导航

在页面顶部提供尽可能小的导航。
提供一致的导航。
避免使用打开新窗口或弹出窗口式的超链接。
平衡页面上的超链接数量和访问信息所需链接的级别数量。

为移动用户优化图像

避免显示比屏幕宽的图像。
配置可替换、尺寸较小的、经优化的背景图像。
一些手机浏览器会缩小图像，所以图像的文本可能会变得难以阅读。
避免使用大型图像。
指定图像的大小。
提供图形和其它非文本元素的备用文本。

为移动用户优化文本

配置较好的文本与背景颜色对比度。
使用通用字体。
以em为单位或百分比来配置字体大小。
使用简短的描述性页面标题。

3、视窗的meta标签

新的视窗meta标签，这是一种Apple设备的扩展，用于帮助在iPhone和Android智能手机上显示网页，它设置了视窗的宽度与尺度。编写视窗meta标签的HTML代码，只需设置name="viewport"以及content属性即可。HTML的content属性值可以是一个或多个指令。下表列出了meta标签的指令和它们的取值：

指令	取值	用途
width	数字值或device-width，指出了设备屏幕的实际宽度	以像素为单位的宽度值
height	数字值或device-height，指出了设备屏幕的实际高度	以像素为单位的高度值
initial-scale	缩放比例数值，设置为1初始大小为100%	视窗的初始大小
minimum-scale	缩放比例数值；Mobile Safari的默认值为0.25	允许用户缩放到的最小比例
maximum-scale	缩放比例数值；Mobile Safari的默认值为1.6	允许用户缩放到的最大比例
user-scalable	yes表示可以缩放，no表示禁止缩放	用户是否可以手动缩放

4、CSS3多媒体查询

根据W3C的定义，多媒体查询是由多媒体类型（如屏幕）和逻辑表达式组成的，它决定了浏览器所在的设备的性能，包括屏幕分辨率、显示方向（竖屏或横屏）等。当多媒体查询的结果为真时，就会让浏览器找到相应的CSS代码，根据特定网页性能呈现网页。

使用link元素的多媒体查询示例

代码如下：

<link href="lighthousemobile.css" rel="stylesheet" media="only screen and (max-width: 480px)">

上述示例代码告诉浏览器有一张特殊的外部样式表，专门用于在大多数流行智能手机上的优化显示。多媒体类型值

only screen

是一个关键词，表示当网页在过时的浏览器中显示时，他是不可见的。多媒体类型值

screen

将设备标识为屏幕。常见的多媒体类型与关键词见下表：

多媒体类型	取值含义
all	用于所有多媒体类型设备
screen	网页屏幕显示
only	让过时的、不支持多媒体查询的浏览器忽略相关设置
print	打印出网页

使用@media规则的多媒体查询示例

用@media规则将他们的代码直接写在CSS中。相关代码以@media开头，再加上多媒体类型与逻辑表达式。然后用一对括号将所希望运用的CSS选择器和声明包围起来。示例代码如下：

@media only screen and (max-width: 480px) {
header { background-image: url(mobile.gif); }
}

下表是常用的多媒体查询属性：

属性名称	数值	准则
max-device-height	数值	输出设备屏幕高度的最大值，以像素为单位
max-device-width	数值	输出设备屏幕宽度的最大值，以像素为单位
min-device-height	数值	输出设备屏幕高度的最小值，以像素为单位
min-device-width	数值	输出设备屏幕宽度的最小值，以像素为单位
max-height	数值	视窗高度最大值（屏幕大小发生变化时会重新评估），以像素为单位
min-height	数值	视窗高度最小值（屏幕大小发生变化时会重新评估），以像素为单位
max-width	数值	视窗宽度最大值（屏幕大小发生变化时会重新评估），以像素为单位
min-width	数值	视窗宽度最小值（屏幕大小发生变化时会重新评估），以像素为单位
orientation	Portrait（竖屏）或landscape（横屏）	页面展示方向

常见平板电脑显示所配置的宽度一般介于769像素与1024像素之间。另一种方法关注响应式显示，指向智能手机时，max-width值为37.5em，平板的min-width为37.5em、max-width为64em，桌面电脑的min-width为64em。

5、弹性图像

弹性图像、加上流式布局与多媒体查询，是响应式网页设计的有机组成部分。要实现弹性图像的效果，CSS设置如下：

编辑img元素的HTML代码：去除height和width属性。
配置CSS中的样式声明max-width：100%。
通过height：auto;这一样式声明，使图像宽高比保持不变，并维持其细节的比例。

6、CSS3弹性盒布局

使用CSS的display属性进行相关配置。值flex表示该容器为弹性块元素。值inline-flex表示该容器为弹性的内联显示元素。包含在弹性容器内的元素被称为弹性项目。

flex-direction属性来设置弹性项目的伸缩方向。值row表示水平方向，值column表示垂直方向。
flex-wrap属性用于指定弹性项目换行方式。默认值为nowrap，表示单行显示。值wrap表示容器为多行模式，很少适合设置图片库的导航。
justify-content属性用来设置浏览器如何显示弹性容器内可能存在的多余空间。值center表示弹性项目居中显示，前后的间隔是相等的。值space-between让弹性项目平均分布在空白区域内，相邻元素的间隔相等。
flex属性和order属性

参考书籍：［1］Terry Felke-Morris.学习HTML5［Ｍ］.第七版.北京：清华大学出版社，2017

点赞
收藏
分享
文章举报

雨凊发布了24 篇原创文章 · 获赞 11 · 访问量 388 私信关注

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航