一文带你响应式网页设计入门

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

原文出处：https://www.freecodecamp.org/news/responsive-web-design-how-to-make-a-website-look-good-on-phones-and-tablets/

在快速生长的互联网环境中，种种类型新硬件装备的推出令人目不暇接，若是在这历程里我们的网页能自动适配各装备差别的分辨率且能以对照精彩的样式为用户泛起网页的话，那么将为你的营业提供至关主要的作用。

今天，我们大多数人都或多或少的使用过这个手艺。据统计，停止2019年，谷歌所有搜索接见中有61%是通过移动装备上完成的。另外，据设计，最迟到2020年9月，谷歌将改变其搜索算法，优先思量对移动端支持更友好的网站。

在这篇文章中，我们将为人人先容以下内容，便于人人更容易明白什么是响应式网页设计：

1. 什么是响应式网页设计
2. viewport meta标签是什么
3. 响应式网页设计使用的手艺有哪些
4. 移动装备模拟器工具有哪些

什么是响应式网页设计？（RWD）

是指网页可以自动凭据用户行为及使用的装备环境(系统平台、屏幕尺寸、屏幕定向等)举行相对应的对结构和行为举行响应的响应和调整。

这些装备特征包罗：

• 网络连接方式
• 屏幕尺寸
• 交互类型（触摸屏，触摸板）
• 图形分辨率。

在响应式网页设计盛行之前，许多公司在处置差别用户装备接见网站时，需要凭据差别装备类型将用户重定向到差别的站点上去。最常见的就是 www.*.*, m.*.*。

但是在响应式网页设计中，服务器向所有装备展现的HTML代码都是相同的，仅通过使用CSS用于改变装备上页面的泛起方式。

无论接纳上述哪种方案，为手机或平板电脑确立网站的第一步是先将浏览器的可视局限定下来，这就是viewport meta标签发挥作用的地方。

用于标识移动网站的Viewport Meta标签

viewport meta标签为浏览器若何调整页面以顺应每个装备的宽度做出了依据。

在缺少viewport meta标签时，移动浏览器将默认使用桌面端的网页样式，以是若是需要开发具有响应式网页时，需要添加viewport标签，以下是尺度实现：

<meta name="viewport" content="width=device-width,initial-scale=1"/>

CSS媒体查询

若是您不熟悉响应式Web设计，则媒体查询是第一个要学习的最主要的CSS功效。媒体查询使您可以凭据当前装备尺寸来设置元素的样式。现在盛行的CSS计谋是首先编写移动样式，然后在其上构建更庞大的桌面版网页样式。

媒体查询是自顺应Web设计的主要组成部分，通常用于屏幕巨细和偏向差别的网格结构、字体巨细、边距和填充。

下面是移动优先样式的常见用例示例，其中对于较小的装备，列的宽度为100%，但在较大的视口中，列的宽度为50%。

.column {
  width: 100%;
}

@media (min-width: 600px) {
  .column {
    width: 50%;
  }
}

• 在思量移动优先时，将“column”元素的宽度设置为100%；
• 通过使用min-width媒体查询，我们专门为最小宽度为600px（暨宽度大于600px）的viewport界说了规则。因此，对于大于600px的界面，我们的column元素的宽度相对其父元素的50％。

虽然媒体查询对于响应式网页设计是必不可少的，但许多其他新的CSS功效也在浏览器中获得普遍接纳和支持。在响应性网页设计方面，Flexbox是这些新的主要CSS功效之一。

什么是Flexbox？

首先，您可能想知道 “ Flexbox能做什么”？

但我想告诉您的是“ Flexbox不能做什么”。

• 使用CSS垂直居中的最简朴方式是什么？Flexbox。
• 若何确立自顺应网格结构？Flexbox。
• 我们若何实现全球和平？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>

我们使用上面的代码完成了以下事情：

1. display: flex在我们的main容器元素中确立一个Flexbox结构。
2. 移动优先的样式。我们设置main标签设置为flex-wrap: wrap，这个设置为允许其内部子节点在父节点中换行， flex-basis: 100% 是指我们的div节点的宽度是相对于父节点宽度的100％（图1）。
3. 适用于桌面装备的样式，我们行使与上一节中的示例类似的媒体查询将容器main元素设置为flex-wrap: nowrap，这样可以确保子元素不会换行，通过在媒体查询中设置div为flex-basis: 33%，我们设置其宽度为父级宽度的33％（图2）。

（ 图1）

（ 图2）

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>

• overflow-y: scroll 这个CSS是要害，通过设置overflow，子元素将通过水平轴溢出并泛起横向转动条。
• 仅使用overflow-y照样不够的，还得为节点设置 white-space: nowrap

响应式图像

通过使用现代图像标签属性，我们可以顺应种种装备和分辨率。以下是响应式图像的示例。

<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>

1. 通过设置max-width: 100% ，图像将凭据其容器宽度自动放大或缩小。
2. 通过picture标签，我们实际上仅渲染一个图像，而且仅基于用户的装备加载最合适的图像。
3. WebP是一种现代图像格式，可为Web页面上的图像提供精彩的压缩方式。
4. srcset 用于凭据装备的分辨率见告浏览器要使用哪个图像。
5. 我们行使属性/值对确立内陆延迟加载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类的容器。

• position: relative 容器元素上的子元素允许子元素行使相对于其的绝对位置。
• height: 0连系padding-bottom: 56.25%是在此处确立动态行为，增强16:9纵横比的要害要素。
• position: absolute，top: 0并left: 0在iframe上举行设置，从而确立一种行为，其中元素相对于其父元素绝对定位自己……将其粘贴到左上方。
• 最后，宽度和高度为100％会使子级iframe元素成为其父级的100％。父级.videoWrapper完全控制确立此宽高比结构。

好的，领会了上面的一些内容后，想必我们已经对响应式Web设计有了一些领会了，那么我们若何测试已经完成的事情呢？

模拟和监视响应式网站的工具

Chrome DevTools移动仿真

Chrome的DevTools提供了一系列平板电脑和移动装备的移动仿真。它还提供了“响应式”选项，使您可以界说viewport的巨细。

使用Foo监控移动网站的性能

Lighthouse是一个开源工具，它为你提供了一种能剖析特定装备网站性能的方式。

Foo在后台使用LighTower监控网站性能，并提供反馈以供剖析。您可以为桌面和移动装备设置监控，以获得有关您的网站响应情形的连续反馈。例如，Lighthouse报出当前装备未能准确加载的图像。

结论

自顺应网页设计将继续快速生长，随着手艺的生长，我们的用户也将会获得更佳的使用体验。另外，响应式的页面也将会更受搜索引擎的青睐。最后，希望简朴的先容能为您领会这些工具和手艺带来一些辅助！

Allbet官网

欢迎进入Allbet官网（Allbet Game）：www.aLLbetgame.us，欧博官网是欧博集团的官方网站。欧博官网开放Allbet注册、Allbe代理、Allbet电脑客户端、Allbet手机版下载等业务。