都2021年了，你不会还没掌握响应式网页设计吧？

铝小幕

于 2021-08-24 16:14:52 发布

阅读量1w

点赞数

分类专栏： HTML Web开发响应式文章标签： html web 编程语言

本文链接：https://blog.csdn.net/tylvdanban/article/details/119892608

版权

Web开发同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

响应式

1 篇文章 0 订阅

订阅专栏

本文深入探讨响应式和自适应网页设计的区别，介绍使用相对单位、断点设置、理解最大值和最小值的概念，以及如何通过嵌套对象优化布局。同时，文章讨论了移动端和PC端优先设计的适用场景，并提到了系统字体与Web字体的选择，以及Bitmap和Vector图像的使用考虑。最后，作者鼓励关注后续更新的H5小游戏代码和实用项目。

摘要由CSDN通过智能技术生成

你是否仍然在努力使网站具有响应能力。我知道初学者可以在网上冲浪（我之前已经这样做过），以使网站具有响应性，但是他们这样得到的只是对小概念的解释。

在本文的这篇文章中，我将谈谈有关如何掌握响应式网页设计的所有知识。

知道响应式设计与自适应设计

反应灵敏

网站外观的动态变化。
取决于设备的屏幕尺寸和方向。

适应性强

自适应设计使用一些固定的布局，然后为当前屏幕尺寸选择最佳的布局。

使用相对单位

开始使用相对单位代替使用绝对单位。

绝对单位=>不要使用{cm，mm，in，pc，px，pt}

相对单位=>使用{em，rem，lh，vw，vh}

将设计划分为断点

断点是预定义的测量区域，可让您根据浏览器或设备的大小重新排列Web布局。

引导响应断点

小型设备= @media (min-width:576px) {...}
中型设备= @media (min-width:768px) {...}
大型设备= @media (min-width:992px) {...}
特大设备= @media (min-width:1200px) {...}

了解最大值和最小值

了解何时使用最大值和最小值。

当设备宽度大于或等于1024px时，它将起作用。

@media (min-width: 1024px){
    h1 {
      font-size: 1rem;
     }
  }

当设备小于或等于1024px时它将起作用

@media (max-width: 1024px){
    h1 {
      font-size: 0.5rem;
     }
  }

使用嵌套对象

嵌套对象或容器是另一个对象内部的对象。

它允许控制嵌套元素，而不必始终控制每个元素。

<div class="parent">
   <span class="nested-element-1">Read</span>
   <p class="nested-element-1">RAHULISM></p>
   <p class="nested-element-1">Articles</p>
</div>

<!-- STYLE -->
<style>   
  .parent span {
    color: black;
  }
  .parent p {
    color: blue;
  }
</style>