别再用困难的方式制作响应式网站了!

2025-05-25

别再用困难的方式制作响应式网站了!

CSS 的声誉不佳有很多原因。根据我做过的民意调查和问卷,人们最沮丧的事情之一就是如何让网站实现响应式设计

我听到的一些最常见的问题是:

  • 媒体查询是一场噩梦
  • 很难找到问题的原因
  • 需要担心的断点太多
  • 活动部件太多

我最近在YouTube上发布了一个视频,解释了为什么我认为许多人可以通过改变使用移动设备优先的方式简化生活。因为令我惊讶的是,大多数人似乎仍然习惯于使用桌面设备切换到移动优先的方式可以解决上述许多问题

这是设计师的错

在评论部分,我询问人们是否首先喜欢桌面版,并告诉我为什么。

我得到的最常见的理由是:

我们的设计师只向我们提供桌面模型

我理解为什么他们开始编写 CSS 来匹配那种情况下的模拟,但老实说,我认为这不是一个足够好的借口。

我得到的一个很好的理由是,他们创建的 Web 应用程序和管理仪表板仅供在台式计算机上使用,这很公平!

人们从桌面布局开始让我如此烦恼的原因是,我真的认为,如果人们首先从移动开始,那么他们就可以更轻松地使用响应式网站,即使他们只有一个桌面电脑可以开始

正如我在上面的视频中提到的,我们正是网站响应式布局不合理的原因。关闭所有 CSS,你就能拥有一个响应式布局。问题出在编写 CSS 时。

为什么移动优先是一种更简单的方法

当我编写 CSS 时,我根本不担心布局。我总是从排版开始。

  • font-family
  • font-sizes
  • margin在我的文本上

完成后,您可能已经拥有一个看起来不错的移动网站。

接下来,您只需添加两个属性即可完成大部分移动网站:

  • padding
  • background-imagebackground-color

一旦你解决了这个问题,网站的移动版本通常已经相当完善了。有些组件可能需要一些细节和调整,但大部分工作已经完成了。

有些部件/部分/组件在移动设备上更为复杂

是的,有些功能,比如导航,确实看起来比较复杂。我们经常会把它们隐藏起来,然后需要添加一些 JavaScript 才能显示出来。

但从布局角度来看,它们更复杂吗?移动设备上的大多数导航只是<ul>关闭了项目符号并增加了一些空格。

用户与其交互的方式增加了复杂性,但从布局的角度来看,它非常简单。

改变你的心态

最困难的事情之一就是摆脱你习惯做的事情。

我确实认为很多人坚持桌面优先,因为我们学习首先创建桌面网站作为静态网站

正因为如此,每当我们开始创建网站时,它都是自然而然的起点。但我确实认为,它导致了人们在创建响应式网站时遇到的很多问题。

当我们开始采用“桌面优先”模式时,我们必须覆盖许多已经应用的样式,而不是让网站自然响应。通过改变思维方式,开始采用“移动优先”模式并增加复杂性,我们可以:

  • 简化流程
  • 编写更少的代码
  • 遇到的问题更少

克服响应式布局的挑战

我想向人们展示,如果他们简化他们的方法,响应式布局就不会那么困难。

为了实现这一目标,我推出了一门名为“征服响应式布局”的免费课程。这门课程除了讲解响应式布局之外,不会深入讲解其他内容。我把它设定为一个为期 21 天的挑战。

如果您想加入,挑战将于 4 月 13 日开始。之后,挑战将暂停几个月。如果您在响应式布局方面遇到困难,那就接受挑战,学习如何克服它吧

如果你错过了这一轮,我会每隔几个月重新开放一次课程,而且永远免费。你仍然可以前往页面注册,课程重新上线时我会通知你。

文章来源:https://dev.to/kevinpowell/stop-making-responsive-websites-the-hard-way-kgb
PREV
成为一名成功的自由开发者的路线图:第一步:选择一条路,坚持下去!第二步:找出问题所在第三步:模拟问题第四步:创建解决方案第五步:推销解决方案结论
NEXT
即使是高级开发人员也会有冒名顶替综合症。什么是冒名顶替综合症?患有冒名顶替综合症的高级开发人员。如何应对冒名顶替综合症?你不是冒名顶替者。