转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
在快速发展的互联网环境中,各种类型新硬件设备的推出令人目不暇接,如果在这过程里我们的网页能自动适配各设备不同的分辨率且能以比较出色的样式为用户呈现网页的话,那么将为你的业务提供至关重要的作用。
今天,我们大多数人都或多或少的使用过这个技术。据统计,截至 2019 年,谷歌所有搜索访问中有 61%是通过移动设备上完成的。另外,据计划,最迟到 2020 年 9 月,谷歌将改变其搜索算法,优先考虑对移动端支持更友好的网站。
在这篇文章中,我们将为大家介绍以下内容,便于大家更容易理解什么是响应式网页设计:
响应式网页设计,是指网页可以自动根据用户行为及使用的设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相对应的对布局和行为进行相应的响应和调整。
这些设备特性包括:
在响应式网页设计流行之前,许多公司在处理不同用户设备访问网站时,需要根据不同设备类型将用户重定向到不同的站点上去。最常见的就是 www.., m..。
但是在响应式网页设计中,服务器向所有设备展现的 HTML 代码都是相同的,仅通过使用 CSS 用于改变设备上页面的呈现方式。
无论采用上述哪种方案,为手机或平板电脑创建网站的第一步是先将浏览器的可视范围定下来,这就是 viewport meta 标签发挥作用的地方。
viewport meta 标签为浏览器如何调整页面以适应每个设备的宽度做出了依据。
在缺少 viewport meta 标签时,移动浏览器将默认使用桌面端的网页样式,所以如果需要开发具有响应式网页时,需要添加 viewport 标签,以下是标准实现:
<meta name="viewport" content="width=device-width,initial-scale=1"/>如果您不熟悉响应式 Web 设计,那我们建议你从媒体查询这个最重要的 CSS 功能开始学习。媒体查询使您可以根据当前设备尺寸来设置元素的样式。现在流行的 CSS 策略是首先编写移动样式,然后在其上构建更复杂的桌面版网页样式。
媒体查询是自适应 Web 设计的重要组成部分,通常用于屏幕大小和方向不同的网格布局、字体大小、边距和填充。
下面是移动优先样式的常见用例示例,其中对于较小的设备,列的宽度为 100%,但在较大的视口中,列的宽度为 50%。
.column { width: 100%; }
@media (min-width: 600px) { .column { width: 50%; } }
虽然媒体查询对于响应式网页设计是必不可少的,但许多其他新的 CSS 功能也在浏览器中得到广泛采用和支持。在响应性网页设计方面,Flexbox 是这些新的重要 CSS 功能之一。
首先,让我先告诉你“ Flexbox 能做什么”。
Flexbox 布局( Flexible Box )模块提供了另一种更棒的方式来应对页面种类似布局、对齐和分配容器等需求,即使它们的大小是动态的。
在下面的示例中,我们如上所述结合媒体查询来创建一个响应式网格。
<style>
main {
background: #d9d7d5;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
div {
background: #767775;
flex-basis: 100%;
height: 100px;
margin-bottom: 0.5rem;
}
@media (min-width: 600px) {
main {
flex-wrap: nowrap;
}
div {
flex-basis: 33%;
}
}
</style>
<main>
<div></div>
<div></div>
<div></div>
</main>
我们使用上面的代码完成了以下工作:
Flexbox 提供了一种很好的方式来实现多样化、流畅的布局。在某些情况下,我们在垂直空间可能没有这样的自由。我们可能需要把一个元素放在固定的高度内。在这种情况下,我们可以使用另一种技术-水平滚动。
可能会有这样一种情况:您的内容会溢出界面,而没有一种优雅的处理方式去解决。没关系,内容溢出滚动条可以为你解决这个问题。
此技术的常见用途包括可滚动菜单和表格。下面是一个可滚动菜单的示例。
<style>
menu {
background: #d9d7d5;
padding: 0.25rem;
overflow-y: scroll;
white-space: nowrap;
}
span {
background: #767775;
color: #ffffff;
display: inline-block;
margin: 0.25rem;
padding: 0.5rem;
}
</style>
<menu>
<span>Responsive Web Design</span>
<span>RWD</span>
<span>Responsive menu</span>
<span>Overflow scroll example</span>
<span>This is a lot of content!</span>
<span>Yes</span>
<span>we</span>
<span>have</span>
<span>another</span>
<span>item</span>
</menu>
通过使用现代图像标签属性,我们可以适应各种设备和分辨率。以下是响应式图像的示例。
<style>
img {
max-width: 100%;
}
</style>
<picture>
<source type="image/webp" srcset="https://my-image.com/my-image-100.webp 1x, https://my-image.com/my-image-200.webp 2x">
<source type="image/png" srcset="https://my-image.com/my-image-100.png 1x, https://my-image.com/my-image-200.png 2x">
<img alt="my image" src="https://my-image.com/my-image-200.png" loading="lazy" width="100" height="100">
</picture>
max-width: 100%
,图像将根据其容器宽度自动放大或缩小。srcset
用于根据设备的分辨率告知浏览器要使用哪个图像。loading="lazy"
。让我们来直接看代码
<style>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="videoWrapper">
<!\-\- Copy & Pasted from YouTube -->
<iframe width=560 height=349 src='https://player.youku.com/embed/XNDU0NDIwNDY4OA==' frameborder=0 'allowfullscreen'></iframe>
</div>
在此示例中,我们将视频嵌入为 iframe 和一个div
带有videoWrapper
类的容器。
好的,了解了上面的一些内容后,想必我们已经对响应式 Web 设计有了一些了解了,那么我们如何测试已经完成的工作呢?
Chrome 的 DevTools 提供了一系列平板电脑和移动设备的移动仿真。它还提供了“响应式”选项,使您可以定义 viewport 的大小。
Lighthouse 是一个开源工具,它为你提供了一种能分析特定设备网站性能的方法。
Foo 在后台使用 LighTower 监控网站性能,并提供反馈以供分析。您可以为桌面和移动设备设置监控,以获得有关您的网站响应情况的持续反馈。例如,Lighthouse 报出当前设备未能正确加载的图像。
自适应网页设计将继续快速发展,随着技术的发展,我们的用户也将会获得更佳的使用体验。另外,响应式的页面也将会更受搜索引擎的青睐。最后,希望简单的介绍能为您了解这些工具和技术带来一些帮助!