用一个CSS属性创建一个响应式网站，让我们来看看它是如何做到的。????

以这个模板为例，没有应用css属性。????

使用clamp()CSS函数，我们可以创建仅具有一个属性的响应式网站。

现在添加魔术CSS

clamp(minimum,preferred,maximum);

在这里！你已经完成了✌

说明

clamp()的工作原理是夹紧或限制一个灵活的值，使其处于最小和最大范围之间。

使用方法如下：

  1. minimum 最小值：例如16px

  2. flexible 弹性值：例如5vw

  3. maximum 最大值：例如34px

h1{font-size:clamp(16px,5vw,34px);}

在此示例中，仅当该值大于16px且小于34px时,h1字体大小值将为视口宽度的5％。

例如，如果你的视口宽度是300px，你的5vw值将等于15px，但是，你将该字体大小值限制为最小16px，因此这就是将要发生的情况。

另一方面，如果你的视口宽度为1400px，则5vw将高达70px！但幸运的是，你将该最大值限制为34px，因此它不会超过该值。

在线Demo：https://dip15739.github.io/ResponsiveWebsite-CSSproperty/

我可以为此模板添加此代码...

img{width:clamp(15vw,800%,100%);}h1{font-size:clamp(20px,5vw,35px);}p{font-size:clamp(10px,4vw,20px);}

而从字面上看，接受任何其他长度、频率、角度、时间、百分比、数字或整数的属性。

原文：https://dev.to/dip15739/responsive-website-with-only-1-css-property-3ea9

作者：Dip Vachhani

福利时间

阿浪联合清华大学出版社为大家送上一本经典书《vue从入门到项目实战》，这次送五本书，大家可以点击下方小程序上京东购买

内容简介

本书从Vue框架的基础语法讲起，逐步深入Vue进阶实战，并在最后配合项目实战案例，重点演示了Vue在项目开发中的一些应用。在系统地讲解Vue的相关知识之余，本书力图使读者对Vue项目开发产生更深入的理解。本书共分为11章，涵盖的主要内容有前端的发展历程、Vue的基本介绍、Vue的语法、Vue中的选项、Vue中的内置组件、Vue项目化、使用Vue开发电商类网站、使用Vue开发企业官网、使用Vue开发移动端资讯类网站、使用Vue开发工具类网站。本书内容通俗易懂、案例丰富、实用性强，特别适合Vue的初学者和从业人员阅读，同时也适合职业生涯遇到瓶颈的前端从业人员和其他编程爱好者阅读。另外，本书也适合作为相关培训机构的教材。

「凭手气、评论」这两种方式都可以参与！感谢亲爱的读者们，祝你们好运！

为了避免中奖后失联，提前加我微信哈

凭手气抽奖（4本）

参与方式：先扫码添加阿浪的微信（上图）

回复暗号111获取小程序抽奖码，扫码即可参与

开奖时间: 周一(11/9)中午12：00

除此之外，朋友圈也会送几本书！

留言抽奖（1本）

  • 奖品：截止11.9号中午12：00，留言点赞数「第一名」可获得一本Vue从入门到项目实战