一图解读《The Guide To Responsive Design In 2023 and Beyond》

[OSInsight]

原文地址：https://ishadeed.com/article/responsive-design/

一句话总结

设计类文章，涉及图片相对较多

本文作者是前端兼设计师 Ahmad，围绕响应式设计 responsive design 这一话题，表达了之前 Web 页面只围绕桌面端 desktop、平板 tablet 以及手机 mobile 的设计已经过时，响应式布局不再是媒体查询的专属。阅读本文，可以了解现代基于组件式开发方式下的响应式布局，为响应式适配提供更多思路。

原文划重点

When you think about building fluid layouts these days isn’t about having fixed-width breakpoints anymore. Instead, the layouts we build today need to work on nearly any device size. To my surprise, I still see websites follow the adaptive design pattern, where it has a container that gets a new max-width value as per the viewport width.

现代布局几乎需要适配任何尺寸的设备，作者发现仍然有很多网站使用传统的根据视口 viewport 宽度设置 max-width 方式的自适应布局。

The term “responsive” means a lot of things now. We have media queries that check for user preferences, and modern CSS features that help us make a fluid layout without even using a media query. Responsive is different nowadays. It’s an exciting time, indeed!

responsive 这一术语与之前的含义大不相同，现在这个词意味着很多。可以通过 media queries 去检查用户偏好设置，通过现代 CSS 新特性来实现更流畅的布局。

It’s time to share more awareness that responsive design isn’t just about fixed-width breakpoints and making a website work on mobile, tablet, and desktop.

现在我们需要意识到响应式设计不再是根据特定尺寸设定固定的宽度，也不再只有手机、平板和电脑。

The current CSS features we’ve been powerful to the point that makes anything possible on all screen sizes.

现代 CSS 已经可以满足适配任何尺寸的屏幕。

CSS is getting so powerful nowadays. That means the future of responsive design will change. It won’t be about treating the whole page as responsive. Instead, we’ll write the responsive CSS for components and let the browser do its own work to decide when a component should have a specific style.

随着 CSS 变得强大，响应式设计的定义也在改变 -- 不再只是整个页面响应式。相反，可以组件级别写响应式样式。

Responsive design isn’t about media queries. It’s about time we change our mindset and take the full potential of modern CSS. I look at a future where we might need media queries for general things like a website header, and the rest can be responsive with size container queries, fluid sizing, and who knows whatever new features will land.

响应式布局不再只有媒体查询，现在我们应该改变原有心智去挖掘现代 CSS 的更多可能。

一图读懂