• 技术文章 >web前端 >css教程

    如何只使用1个css属性来创建响应式网站?

    青灯夜游青灯夜游2020-11-18 17:40:51转载98

    用一个CSS属性创建一个响应式网站,下面本篇文章就来给大家介绍一下它是如何做到的。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。【相关推荐:CSS视频教程

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

    1.jpg

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

    现在添加魔术CSS

    clamp(minimum, preferred, maximum);

    在这里!你已经完成了

    2.jpg

    说明

    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);
    }

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

    4.png

    原文:https://dev.to/dip15739
    作者:Dip Vachhani

    更多编程相关知识,请访问:编程视频!!

    以上就是如何只使用1个css属性来创建响应式网站?的详细内容,更多请关注php中文网其它相关文章!

    本文转载于:segmentfault,如有侵犯,请联系a@php.cn删除
    专题推荐:前端 css 响应式网
    上一篇:css怎么隐藏文本超出部分 下一篇:css中有哪些字体属性
    第14期线上培训班

    相关文章推荐

    • css如何设置字体为微软雅黑• css如何实现圆形头像• css层叠样式表是什么• bootstrap 如何修改css样式• css如何改变文本框颜色

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网