响应式网页设计——怎样让一个网站在手机、平板上好看

创作时间:

作者:

@小白创作中心

响应式网页设计——怎样让一个网站在手机、平板上好看

引用

来源

https://www.freecodecamp.org/chinese/news/responsive-web-design-how-to-make-a-website-look-good-on-phones-and-tablets/

响应式网页设计是一种专注于一个网站用户环境的方法，而用户环境则取决于他们连接互联网的设备。据统计, 截至 2019 年，61% 的 Google 搜索访问来自移动设备。在 2020 年 9 月，Google 将改变其搜索算法，让其优先展示移动端友好的网站。

响应式网页设计是什么？

响应式 Web 设计是一种专注于一个网站用户环境的方法，而用户环境则取决于他们连接互联网的设备。有很多设备特性有助于实现以用户为中心，例如：

网络连接
屏幕尺寸
交互类型（触屏、触控板）
图像分辨率

在响应式 Web 设计流行前，很多公司管理着一个完全独立的网站，用于接收基于用户代理标识的流量导向。但在响应式 Web 设计中，服务器总是给所有设备发送相同的 HTML 代码，而 CSS 则用于改变页面在设备上的渲染。

识别一个移动端网站的视口元数据标签

视口元数据标签指示浏览器如何调整页面以适应每种设备的宽度。当视口元数据标签缺省，移动端浏览器将以默认桌面端设置来显示网页。这导致了看似缩小的结果、非响应式的体验。

以下是一种标准实现：

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

针对不同屏幕尺寸和方向的 CSS 媒体查询

媒体查询让你能根据视口宽度设置元素样式。一种流行的 CSS 策略是优先编写移动端样式，再在它们之上构建更复杂的桌面专用样式。

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

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

什么是 Flexbox？

Flexbox 布局（弹性盒子）模块提供了一种更有效的方式去布局、对齐和在容器项目间分配空间，即使它们的尺寸是动态的（因此就有了 “flex” 这个词）。

在以下示例中，我们结合如上所述的媒体查询来创建一个响应式网格。

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

基于 Overflow Scroll 的水平滚动

这种技术的常见用处包括可滚动菜单和表格。以下是一个可滚动菜单的示例。

<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>响应式 Web 设计</span>
  <span>RWD</span>
  <span>响应式菜单</span>
  <span>Overflow scroll 示例</span>
  <span>这是一大堆内容！</span>
  <span>是的</span>
  <span>我们</span>
  <span>有</span>
  <span>另一个</span>
  <span>项目</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>

响应式视频

一个建立响应式图片、视频、iframe 和其它元素的关键策略涉及使用 aspect-ratio。Aspect ratio 盒子不是一个新技术，而且对 Web 开发者来说是非常有用的工具。

<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">
  <!-- 复制、粘贴自 YouTube -->
  <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>