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

前端开发作者： 2024-08-22 02:30:01

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。原文出处：https://www.freecodecamp.org/news/responsive-web-

什么是响应式网页设计
viewport meta标签是什么
响应式网页设计使用的技术有哪些
移动设备模拟器工具有哪些

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

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

.column {
  width: 100%;
}

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

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

使用CSS垂直居中的最简单方法是什么？Flexbox。
如何创建自适应网格布局？Flexbox。
我们如何实现全球和平？Flexbox。

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

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

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

通过设置max-width: 100% ，图像将根据其容器宽度自动放大或缩小。
通过picture标签，我们实际上仅渲染一个图像，并且仅基于用户的设备加载最合适的图像。
WebP是一种现代图像格式，可为Web页面上的图像提供出色的压缩方式。
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>

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