CSS响应式设计的5个技巧

选择移动优先方法以实现响应式设计

响应式设计的最佳方法是先设计网站的移动版本。

这样您就可以看到图像、文本、徽标和其他元素在较小屏幕上的显示效果。

如果显示没有问题，那么将你的设计适配到更大的屏幕上应该也不会有任何问题。

响应式设计始于此元标签

要开始使用响应式设计，第一行代码需要放在页面的头部（head）部分。您必须从响应式头部开始，将这段代码放在 HTML 页面的头部（head）部分。

<meta name="viewport" content="width=device-width, initial-scale=1">

涵盖的概念

1. min()
2. 最大限度（）
3. 夹钳（）
4. box-sizing: border-box
5. 溢出：隐藏

1. 最小值（min）

min从以逗号分隔的表达式列表中选择最小（最负）的值。

例如，对于以下情况：min(1rem, 50%, 10vw)，浏览器会计算出哪个相对单位最小，并将该值用作实际值。

参考 - web.dev在CodePen中尝试一下

2. 最大值（Max）

该max()函数从以逗号分隔的表达式列表中选择最大值。

例如：max(50vw, 400px),浏览器会判断哪个值最大。

参考 - web.dev在CodePen中尝试一下

3. 夹紧值（Clamp）

clamp()min() 是and 函数 的组合 max() ，接受三个参数：

1. 最小值
2. 首选值，以及
3. 最大值

例如：clamp(45ch, 50%, 75ch)这允许浏览器确定段落的宽度。它会将宽度设置为 50%，除非 50% 小于 45 通道，此时将选择 45 通道；反之亦然，如果 50% 大于 75 通道。

参考 - web.dev在CodePen中尝试一下

4. 盒子尺寸

CSS 的一项强大功能是 box-sizing，它可以帮助你解决响应式设计中的各种难题。对于响应式网站开发而言，box-sizing 至关重要。

1. 内容框

内容框的大小会根据内容而变化。当网站在移动设备上浏览时，内容框会根据内容自动调整大小，从而实现滚动浏览。

2. 边框框

如果对宽度以百分比设置的元素使用 border-box，它将考虑内边距，因此您不再需要调整宽度。 

毋庸置疑，这种技巧最适用于移动网站和支持 CSS3 的浏览器。

参考 - Pocket Gopher在CodePen中尝试一下

5.溢出属性

Overflow: hidden是一个方便的 CSS 属性，除了响应式设计之外，在很多情况下都很有用。

与其清除 div 元素，不如直接将容器的 overflow 值设置为 hidden 来清除容器。

Overflow: hidden使内容隐藏而不是滚动。

在CodePen中试试看。

额外提示

响应式图像

HTML 提供了一个元素，允许我们根据添加的媒体查询指定要渲染的确切图像资源。

我们不再将一张图片（通常是高分辨率的大图）发送到所有屏幕尺寸并缩放到视口宽度，而是指定一组图片在特定情况下使用。

<picture>
  <source media="(max-width:1000px)" srcset="picture-lg.png">
  <source media="(max-width:600px)" srcset="picture-mid.png">
  <source media="(max-width:400px)" srcset="picture-sm.png">
  <img src="picture.png" alt="picture">
</picture>

在这个例子中，picture.png 是全尺寸图像。

从那里，我们定义了图像的下一个最大版本 picture-lg.png，尺寸按降序递减，直到最小版本 picture-sm.png。

请注意，我们仍然在这种方法中使用媒体查询，但驱动响应式行为的是元素本身，而不是在 CSS 中定义断点。

参考

1. https://web.dev/min-max-clamp/
2. https://www.freecodecamp.org/news/css-properties-examples/
3. https://corpocrat.com/2015/11/03/10-cool-css-tricks-for-responsive-design/
4. https://www.pixafy.com/blog/5-useful-css-tips-for-responsive-design/
5. https://css-tricks.com/beyond-media-queries-using-newer-html-css-features-for-responsive-designs/

感谢您抽出时间阅读本文。本文最初发表于我的博客。

如果您觉得这篇文章有用，请点赞并关注我的推特账号Ramya Chinnadurai。欢迎随时与我联系，分享您的想法和建议。