随着互联网上手机用户数量的增加, 对网页设计人员而言,以合理方式 能够很好地适应各种屏幕尺寸自适应设计,最初由 Ethan Marcotte 在 A List Apart 中 是一种设计策略,及其设备 通过更改网站布局来适应所使用的设备来实现这些功能。对于 例如,自适应网站可能会在手机上以单列视图显示内容, 平板电脑上为两列,桌面设备为三或四列。
由于上网设备有这么多可能的屏幕尺寸, 务必要让网站适应任何现有或未来的屏幕尺寸现代 响应式设计也会考虑触摸屏等交互模式。 我们的目标是优化所有用户的体验。
设置视口
针对各种设备进行了优化的网页必须在 文档标头。此标记会告知浏览器如何控制网页的 尺寸和缩放比例
为了尽可能提供最佳体验,移动浏览器会以
桌面设备屏幕宽度(通常约为 980px
,但因设备而异),
然后尝试增大字号并使内容看起来更美观
缩放内容以适应屏幕。这可能会导致字体看起来不一致,
需要用户放大才能查看内容并与之互动。
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
如果使用元视口值width=device-width
,则网页将与
屏幕宽度(以设备无关像素 (DIP) 为单位),这是一种标准的视觉像素单位
(在高密度屏幕上可以由许多物理像素组成)。这个
使页面重排内容以匹配不同的屏幕尺寸。
![一个屏幕截图
因为其文字是非常缩小的,所以难以阅读](https://web.developers.google.cn/static/articles/responsive-web-design-basics/image/screenshot-a-page-the-t-faa09126e69d.png?authuser=6&hl=el)
![以下内容的屏幕截图:
以便于用户阅读的文字大小显示在同一页面上。](https://web.developers.google.cn/static/articles/responsive-web-design-basics/image/screenshot-the-same-page-9ac43367e5e0c.png?authuser=6&hl=el)
某些浏览器会保留
旋转到横向模式时,保持网页宽度不变,然后进行缩放以填满
而不是自动重排添加值 initial-scale=1
会告知浏览器
将 CSS 像素与设备无关像素之间的 1:1 关系设为
无论设备的屏幕方向如何,都可让页面充分利用整个空间
横向宽度。
没有包含 width
或 initial-scale
的 <meta name="viewport">
标记
Lighthouse 审查可以帮助您自动完成确保您的 HTML
文档正确使用视口元标记。
根据视口调整内容大小
无论是桌面设备还是移动设备,用户都习惯于滚动浏览网站 不要在水平方向上移动强制用户水平滚动或滚动到 缩小以查看整个网页会导致糟糕的用户体验。
在开发包含元视口代码的移动网站时, 不小心创建的网页内容与指定的 视口例如,如果显示的图片宽度大于视口,则可能会导致 水平滚动。为防止出现这种情况,请调整内容,使其适合 视口
内容尺寸不适合视口大小 Lighthouse 审核可帮助您自动执行检测溢出的过程 内容。
图片
如果图片的尺寸固定,当图片大于
视口我们建议为所有图片的 max-width
指定 100%
,这会缩小
以适应可用空间,同时防止图片超出
初始大小
在大多数情况下,可通过将以下内容添加到样式表中来实现:
img {
max-width: 100%;
display: block;
}
向 img 元素添加图片尺寸
即使您设置了 max-width: 100%
,我们仍然建议您添加 width
和
将 height
属性添加到 <img>
标记中,以便浏览器预留空间,
加载前图片。这有助于防止布局偏移。
布局
因为不同设备的屏幕尺寸和宽度(以 CSS 像素为单位)相差很大 (例如,在手机和平板电脑之间,甚至在不同的手机之间)、 内容不应依赖特定的视口宽度才能正常显示。
过去,这需要以百分比形式设置布局元素。使用 Pixel 测量时,用户需要在小屏幕上水平滚动:
![两列布局的屏幕截图,第二列的大部分内容不在视口之外](https://web.developers.google.cn/static/articles/responsive-web-design-basics/image/screenshot-a-column-lay-cb8a5725d0a67.jpg?authuser=6&hl=el)
在较小的屏幕上,改用百分比会让列变窄 每列始终占据相同百分比的屏幕宽度:
Flexbox、网格布局和 Multicol 等现代 CSS 布局技术 可以更轻松地创建这些柔性网格。
Flexbox
如果您有一组不同大小的项,并且希望它们 适合一排或多行,较小内容所占空间较小 较大的文件,会占用更多空间
.items {
display: flex;
justify-content: space-between;
}
您可以使用 Flexbox 将内容显示为单行,或换行显示 行。
CSS 网格布局
CSS 网格布局可创建灵活的网格。您可以改进较早的浮动广告
使用网格布局和 fr
单元的示例,该单元表示
容器中的可用空间
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
您还可以使用网格布局创建包含尽可能多的项的常规网格布局
尽可能提供最佳服务可用曲目的数量会随着屏幕尺寸的增加而减少
。以下演示展示了一个网格,其中包含任意数量的卡片
每行最小为 200px
。
多列布局
对于某些类型的布局,您可以使用多列布局(多列布局)。
该函数使用 column-width
属性创建自适应列数。
在下面的演示中,当存在
可再容纳 200px
列。
使用 CSS 媒体查询实现自适应设计
有时您可能需要对布局进行更大范围的更改 支持比前述技术所允许的技术水平更高的某些屏幕尺寸。 这正是媒体查询的用武之地。
媒体查询是简单的过滤条件,可应用于 CSS 样式, 基于呈现内容的设备类型确定这些样式。他们还可以 根据设备功能(包括宽度、高度、屏幕方向)更改样式 以及设备是否用作触摸屏。
如需提供不同的打印样式,您可以定位输出类型, 包含用于打印样式的样式表:
<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="stylesheet" href="print.css" media="print">
…
</head>
…
您还可以使用媒体查询在主样式表中添加打印样式:
@media print {
/* print styles go here */
}
对于响应性网页设计,最常见的查询是针对设备功能,因此 您可以针对触摸屏或较小的屏幕自定义布局。
基于视口大小的媒体查询
借助媒体查询,您可以打造 特定屏幕尺寸屏幕尺寸查询可以测试 以下事项:
width
(min-width
、max-width
)height
(min-height
、max-height
)orientation
aspect-ratio
所有这些功能都得到了出色的浏览器支持。如需了解更多详情, 包括浏览器支持信息,请参阅 width、 height、 方向和 宽高比 到这里就结束了
基于设备功能的媒体查询
考虑到可用设备的种类,开发者无法做出这样的假设 每台大型设备都是普通的台式机或笔记本电脑,或者 触摸屏。媒体查询中新增的一些功能 您可以测试某些功能,例如用于 与设备互动,以及用户能否将指针悬停在上面 元素。
hover
pointer
any-hover
any-pointer
请尝试在不同的设备上观看此演示, 例如常规的桌面设备和手机或平板电脑
这些新功能在所有现代浏览器中都得到了很好的支持。详情请访问 适用于 hover 的 MDN 页面, pointer 和 任意指针。
使用 any-hover
和 any-pointer
any-hover
和 any-pointer
功能会测试用户是否可以按住指针
覆盖元素(通常称为悬停),或者根本使用指针,即使
而不是他们与设备互动的主要方式。请谨慎使用
来避免强制触摸屏用户切换到鼠标。
不过,如果需要,any-hover
和 any-pointer
会非常有用
确定用户设备的类型例如,一台具有
除了
具有悬停能力。
如何选择断点
请勿根据设备类、任何产品、品牌名称或 操作系统这会使您的代码难以维护。相反, 内容会决定其布局如何变化以适应容器。
选择主要断点,方法是先从小屏幕开始,然后再逐渐扩展
先将内容设计为适合小屏幕,然后再展开屏幕 直到需要断点为止这样,您便可尽可能减少 断点,并根据内容进行优化。
以下示例详细介绍了天气预报微件示例(位于 。第一步是让预测结果在 小屏幕:
![以下内容的屏幕截图:
以移动设备宽度显示天气应用](https://web.developers.google.cn/static/articles/responsive-web-design-basics/image/screenshot-a-weather-app-8807746eddfbe.png?authuser=6&hl=el)
接下来,调整浏览器大小,直到元素之间的空间过大
使该微件看起来很美观判定结果具有主观性,但高于 600px
确实太宽了
![以下内容的屏幕截图:
商品之间有较大间隙的天气应用](https://web.developers.google.cn/static/articles/responsive-web-design-basics/image/screenshot-a-weather-app-236b1e89bc871.png?authuser=6&hl=el)
如需在 600px
处插入断点,请在
组件的 CSS:在浏览器尺寸为 600px
或更窄时使用的 CSS
当宽度大于 600px
时,使用此参数。
@media (max-width: 600px) {
}
@media (min-width: 601px) {
}
最后,重构 CSS。在针对 600px
的 max-width
的媒体查询中,
添加仅适用于小屏幕的 CSS。在某个
第 min-width
个(共 601px
个)添加适用于大屏幕的 CSS。
在必要时选择次要断点
除了在布局发生显著变化时选择主要断点之外, 针对细微变化进行调整也很有帮助例如, 调整元素上的外边距或内边距会很有帮助, 或增大字体,使其在布局中更自然。
此示例遵循与上个示例相同的模式,从
优化较小屏幕布局首先,在视口处于展开状态时
宽度大于 360px
。之后,当有足够的空间后
将最高温度和最低温度区分开来 使其处于同一条线上
放大天气图标
@media (min-width: 360px) {
body {
font-size: 1.0em;
}
}
@media (min-width: 500px) {
.seven-day-fc .temp-low,
.seven-day-fc .temp-high {
display: inline-block;
width: 45%;
}
.seven-day-fc .seven-day-temp {
margin-left: 5%;
}
.seven-day-fc .icon {
width: 64px;
height: 64px;
}
}
对于大屏幕,我们建议限制预测面板的最大宽度 因此不会占用整个屏幕宽度
@media (min-width: 700px) {
.weather-forecast {
width: 700px;
}
}
优化文本,提高阅读量
经典的可读性理论建议,理想的列应包含 70 到 80 个 每行字符(大约 8 到 10 个英文单词)。您可以考虑将 断点。
![一个屏幕截图
移动设备上的文字页面](https://web.developers.google.cn/static/articles/responsive-web-design-basics/image/screenshot-a-page-text-e1d8d10e2e41f.jpg?authuser=6&hl=el)
![桌面浏览器上的文本页面的屏幕截图](https://web.developers.google.cn/static/articles/responsive-web-design-basics/image/screenshot-a-page-text-6d4928468315d.jpg?authuser=6&hl=el)
在此示例中,位于 1em
的 Roboto 字体在
小屏幕,而大屏幕需要断点。在这种情况下,如果
浏览器宽度大于 575px
,理想的内容宽度为 550px
。
@media (min-width: 575px) {
article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}
避免隐藏内容 (:#avoid-hiding-content)
根据屏幕尺寸选择要隐藏或显示的内容时,请务必谨慎。 不要仅仅因为内容无法适合屏幕而将其隐藏。屏幕尺寸 并没有预料到用户可能想看到什么内容例如,去除花粉 天气预报的计数可能是导致春季过敏的严重问题 然后根据这些信息决定是否可以出门。
在 Chrome 开发者工具中查看媒体查询断点
设置媒体查询断点后,请检查它们对您网站的 外观。您可以调整浏览器窗口的大小来触发断点, 但 Chrome 开发者工具有一项内置功能可以显示页面在 不同断点。
![显示天气应用已打开并选择宽度为 822 像素的开发者工具的屏幕截图。](https://web.developers.google.cn/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-1a065c0eb725a.png?authuser=6&hl=el)
![显示天气应用已打开并选择宽度为 436 像素的开发者工具的屏幕截图。](https://web.developers.google.cn/static/articles/responsive-web-design-basics/image/screenshot-devtools-our-d104f520772db.png?authuser=6&hl=el)
若要在不同断点下查看网页,请执行以下操作: