创建响应式 Web 应用的极其简单方法
我还记得第一次接触响应式设计时的情景。在进行任何研究之前，它在我看来极其复杂。
同一个应用程序在如此多种类的用户设备上运行和表现都不同？
我需要涵盖所有屏幕尺寸，从超宽显示器、笔记本电脑和平板电脑，一直到智能手机？
老兄，那肯定是一场噩梦。
但说实话，并非如此。
响应式设计不过是一堆if空话而已。
让我们深入探讨一下这个话题。
两种设计类型
根据你创作的内容，你有两种选择：
- 移动优先设计
- 桌面优先设计
移动优先设计是指首先为移动设备设计和创建软件，然后再将其扩展到桌面设备。
它确保您的核心功能在移动设备上可用。
在大屏幕上添加更多功能很容易，但在缩小屏幕的同时去除部分功能并保留核心功能却很难。
根据这项研究，68.9%的网站访问量来自移动设备。
如果你正在开发一款面向消费者的应用，那么移动优先设计很可能是你的选择。
复杂的 B2B 解决方案需要桌面优先设计，有时甚至没有功能齐全的移动解决方案——它们实在太复杂了。
因此，本文将重点介绍移动优先设计。
设计
我们尽量简化说明。假设你有一些想要在信息流中展示的项目。它看起来会像这样：
这里包含两个部分：
- 父组件，
container - 子组件
items
如果我们忽略除布局之外的所有 CSS 代码，它看起来会像这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
<style>
.container {
display: grid;
grid-template-columns: 1fr;
align-content: flex-start;
gap: 16px;
padding: 16px;
}
.item {
padding: 88px 16px;
}
</style>
</html>
你能看到元标签吗<meta name="viewport" content="width=device-width, initial-scale=1.0">？
它极其重要，没有它就没有响应式设计。没有它，浏览器就无法识别初始缩放比例，在移动设备上显示效果会非常糟糕。
施展魔法，让桌面系统正常运行
开玩笑啦，这没什么复杂的魔法。就像我说的，只是一堆if语句而已！
我们尽量分散摆放这些物品，每行保持3件：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
<style>
.container {
display: grid;
grid-template-columns: 1fr;
align-content: flex-start;
gap: 16px;
padding: 16px;
}
.item {
padding: 88px 16px;
}
@media (min-width: 992px) {
.container {
grid-template-columns: 1fr 1fr 1fr;
}
}
</style>
</html>
我们终于来到了这里，开始介绍@media查询。
让我们用一种简单、大家熟悉的方式来解读这段话：
if (screen width is bigger or equal than 992px) {
apply styles in the same way as before
}
就是这样！仅此而已！这里的样式只会影响宽度大于 . 的屏幕992px。
平板电脑怎么样？
您可以将媒体查询与逻辑运算符结合使用。
是的，你可以这样做：
@media (min-width: 768px) and (max-width: 991px) {
// styles
}
这些风格将影响从768px到的一切991px。
记住，这只是一个if语句。
如何覆盖所有设备
媒体查询远不止是min-width和max-width。
您可以查看诸如orientation、、aspect-ratio等等内容。
您可以使用逻辑运算符，例如or，not以及所有其他运算符。
但说实话，你从这篇文章中读到的内容足以让你轻松愉快地开始。
你可能根本不需要其他大部分查询语句。或许在某些特殊情况下会用到。到那时，你对查询语句的理解将会非常透彻，复杂的查询语句对你来说简直易如反掌！
喜欢我的作品吗？不妨请我吃个牛角面包吧。这会极大地激励我。
请查看Medium上发表的原文文章底部，了解有关响应式网页设计的最佳课程。
文章来源：https://dev.to/domagojvidovic/a-ridiculously-simple-way-for-creating-responsive-web-apps-1f43