掌握响应式网页设计

600+ 免费设计资源

最近几天我没有发布任何内容。虽然我已经写了 12 篇与 JavaScript、React 和 CSS 相关的文章。

我仍然在努力让网站响应式。我知道初学者会上网（我之前也这样做过）来让网站响应式，但他们得到的只是一些小概念的解释。

在这篇文章中，我将阐明如何掌握响应式网页设计的所有内容。

600+ 免费设计资源

资源。免费。学习。
我们让互联网变得更简单。

访问 - 600+ 免费设计资源

了解响应式设计与自适应设计

响应式

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

自适应

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

使用相对单位

不要使用绝对单位，而要使用相对单位。

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

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

将设计划分为断点

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

Bootstrap 响应式断点

• 小型设备=@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>  

移动端或桌面端优先

何时适合使用桌面优先

• 当桌面端销量高的时候
• 用户界面丰富
• 专注于复杂和增强的视觉效果
• 提供生产力工具或业务相关服务的网站
• 高度精致的用户体验

何时适合采用移动优先

• 简单而简约的网站
• 用户体验针对移动设备进行了优化
• 类似娱乐、新闻或其他移动类别的网站。

了解 Web 字体与系统字体

您网站上加载的每一种排版或字体都会发送到服务器并发出请求并返回。

• 系统字体是默认字体，加载速度很快
• 网络字体会减慢浏览您网站的用户的加载时间

一些可以正确渲染的安全​​ Web 字体

Georgia、Times New Roman/Times、Arial / Helvetica、Comic Sans、Lucida Sans Unicode、Tahoma / Geneva、Courier New。

位图与矢量图像

位图图像存储为一系列称为像素的微小点，

矢量图是由基于数学方程的点、线和曲线组成的艺术品，而不是纯色的方形像素。

用什么？

矢量图像：比位图更具可扩展性，能够增加图形的尺寸而不会产生像素化，并且质量更好。

😎感谢阅读 | 祝您编码愉快🤓

每周订阅我本周发布的精彩文章以及一些优惠或公告。点击此处订阅