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

在这里插入图片描述

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

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

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

反应灵敏

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

适应性强

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

使用相对单位

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

绝对单位=>不要使用{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>  

移动端或PC端优先

什么时候“PC端优先”合适

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

什么时候“移动端优先”合适

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

理解Web VS System字体

您网站上加载的每一种字体或字体都将发送到服务器并发出请求,然后再返回。

  • 系统字体是默认字体,可以快速加载
  • Web字体会降低正在浏览您网站的用户的加载时间

正确提供了一些安全的Web字体

Georgia, Times New Roman/Times, Arial / Helvetica, Comic Sans, Lucida Sans Unicode, Tahoma / Geneva, Courier New.


Bitmap vs vector 图像

Bitmap图像存储为一系列称为像素的小点,

vector(矢量)图像是由点,线和曲线组成的艺术品,这些点,线和曲线基于数学方程式,而不是单色的正方形像素。

使用哪个?
矢量图像:比Bitmap图像更具可扩展性,能够增加图形的大小而不会产生像素化和更好的质量。


作者公众号:【海拥】
在这里插入图片描述

关注支持一下吧,后面我还会持续更新免费好玩的H5小游戏代码、Java小游戏代码、好玩、实用的项目和软件等

温馨提示:最后不要忘了❤或📑支持一下作者哦

  • 6
    点赞
  • 8
    收藏
  • 打赏
    打赏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:猿与汪的秘密 设计师:我叫白小胖 返回首页
评论 4

打赏作者

海拥✘

“听说赞赏的人运气会爆棚哦!”

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值