从品牌网站建设到网络营销策划,从策略到执行的一站式服务
了解只使用1个css属性来创建响应式网站的示例?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
以这个模板为例,没有应用css属性。
使用clamp()
CSS函数,我们可以创建仅具有一个属性的响应式网站。
现在添加魔术CSS
clamp(minimum, preferred, maximum);
在这里!你已经完成了
clamp()
的工作原理是“夹紧”或限制一个灵活的值,使其处于最小和较大范围之间。
使用方法如下:
16px
5vw
34px
h2 { font-size: clamp(16px, 5vw, 34px); }
在此示例中,仅当该值大于16px
且小于34px
时,h2
字体大小值将为视口宽度的5%
。
例如,如果你的视口宽度是300px
,你的5vw
值将等于15px
,但是,你将该字体大小值限制为最小16px
,因此这就是将要发生的情况。
另一方面,如果你的视口宽度为1400px
,则5vw
将高达70px
!但幸运的是,你将该较大值限制为34px
,因此它不会超过该值。
在线Demo:https://dip15739.github.io/ResponsiveWebsite-CSSproperty/
我可以为此模板添加此代码...
img { width: clamp(15vw, 800%, 100%); } h2 { font-size: clamp(20px, 5vw, 35px); } p { font-size: clamp(10px, 4vw, 20px); }
而从字面上看,接受任何其他长度、频率、角度、时间、百分比、数字或整数的属性。
感谢各位的阅读!看完上述内容,你们对只使用1个css属性来创建响应式网站的示例大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注创新互联行业资讯频道。
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图