网站建设 打造自适应网站只用一个css属性就够了
用一个 css 属性创建一个响应式网站，让我们来看看它是如何做到的。 以这个模板为例，没有应用 css 属性。 使用 clamp() css 函数，我们可以创建仅具有一个属性的响应式网站。 现在添加魔术 css clamp(minimum, preferred, maximum); 在这里！你已经完成了✌ 说明 clamp() 的工作原理是“夹紧”或限制一个灵活的值，使其处于最小和最大范围之间。 使用方法如下： minimum 最小值：例如 16px flexible 弹性值：例如 5vw 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); }…