如何仅使用 CSS 创建响应式网站

使用 vw 和 rem 构建响应式页面。

Photo by 用户体验商店 on 不飞溅

前言

从移动浏览器或应用程序访问的网站越来越多。对我来说，在空闲时间，我基本上是用手机访问网站。移动浏览器对用户来说很方便，但对开发人员来说却是痛苦的，因为屏幕大小不同。例如，iPhone 有 7 种不同的尺寸。为了获得更好的体验，不同的屏幕尺寸需要不同的显示效果。与 iPhone SE 相比，iPhone Pro 需要显示更大的 font-size 和 padding。

常见的方法是使用媒体查询来更改 html 的字体大小以反映屏幕尺寸的更小或更大。我们可以使用 雷姆 作为每个元素的长度单位。

例如，我们可以将 1 级标题设置为 2雷姆 , 如果 html 字体大小是 16像素 ，那么 h1 标签的字体大小将是 32像素 （1rem = 16px）。在大屏幕中，我们只需要通过媒体查询来改变基本字体大小。

 html {  
 字体大小：16px；  
 }  
 h1 {  
 字体大小：2rem；  
 }  
[ @媒体](https://twitter.com/media) 屏幕和（最小宽度：500px）{  
 html {  
 字体大小：20px；  
 }  
 }[ @媒体](https://twitter.com/media) 屏幕和（最小宽度：600px）{  
 html {  
 字体大小：24px；  
 }  
 }

当我们缩放屏幕时，标题字体大小也会改变：

通过使用媒体查询，我们必须指定规则来应用不同的字体大小，效果看起来不是很流畅。调整屏幕大小时如何平滑调整字体大小？

使用视口单元 vw

视口单位始终代表屏幕尺寸， 1大众 等于视口宽度的百分之一，这意味着如果我们使用 大众 ，它总是与视口的大小有关：

 1vw = document.documentElement.clientWidth / 100

我们可以通过设置 body 在 chrome devtools 上进行测试 字体大小：1vw ，实际值将与 document.documentElement.clientWidth / 100 ：

通过使用 大众 允许我们使页面具有响应性，但有一个问题是我们无法缩放文本。上面的演示表明 1大众 在移动屏幕上会非常小，在 PC 桌面浏览器中会额外。

解决方案是使用 CSS 函数，比如 计算（） , 夹钳（） ：

 <h1>响应式字体大小（仅使用 vw）</h1>  
 <p class="calc">使用 calc() 的解决方案</p>  
 <p class="clamp">使用钳位（）的解决方案</p> // CSS  
 h1 {  
 字体大小：10vw；  
 }  
 .calc {  
 字体大小：计算（10px + 5vw）；  
 }  
 。夹钳 {  
 字体大小：钳位（20px，5vw，2rem）；  
 }

我们直接设置元素 font-size 而不是设置 html font-size 只是为了测试。在实际项目中，建议设置 html font-size 以供我们使用 雷姆 对于元素框大小或其他长度。它的行为如下：

这 夹钳（） 可能更有用，它支持三个参数，最小值、首选值和最大值。语法是：

 钳位（最小值、值、最大值） 被解析为 M ath.max(MIN, Math.min(VAL, MAX))

所以我们可以利用这个特性为移动浏览器和桌面浏览器创建响应式网站。

里面有demo Codepen.io ，您可以通过调整浏览器窗口大小来测试它。

结论

我们使用视口单元 大众 和 CSS 函数 夹钳（） 通过设置页面基本字体大小来创建响应式网页，并且页面中的每个元素都使用 雷姆 作为长度单位。我在许多项目中都使用这种方式，希望这可以帮助你。

感谢您的阅读，我期待您的以下更多实用技能：

[

不要使用变换到中心元素

将我们不知道大小的元素居中的更好方法

levelup.gitconnected.com

](/dont-use-transform-to-center-element-b378587ad1db)

[

如何仅使用 CSS 实现滚动到顶部

使用粘性布局和标签滚动

levelup.gitconnected.com

](/how-to-implement-scroll-to-top-with-only-css-ae27cb9d4678)

[

如何在不使用 CSS 边框的情况下构建元素边框

4种实现边框效果的方法

levelup.gitconnected.com

](/how-to-construct-an-element-border-without-using-csss-border-4a5c9fc7c9e6)

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/9666/52420200