5

#yyds干货盘点#CSS的clamp()函数实现响应式布局

 2 years ago
source link: https://blog.51cto.com/u_11365839/5412211
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

实现响应式布局，一定会想到媒体查询，媒体查询有一个不太方便的地方，不同的设备都要写一套兼容方案。今天就分享一种新的解决方案——clamp()函数。

#yyds干货盘点#CSS的clamp()函数实现响应式布局_最小值

min & max

提到clamp()函数，就不得不提的就是它的两个前辈函数——min()和max()，顾名思义，前者是取最小值，后者是取最大值。该节就以 ​min() 方法为例，详细介绍一下这两个函数的用法。

min()方法使用如下，以一个或多个逗号分隔的数学函数、字面量或是其他表达式作为参数，返回参数列表中的最小值：

property: min(expression [, expression])



举个例子：



width: min(9px, 10px);   //这时得到宽度是9px
font-size: min(2px + 8px, 11px);   //这里“+”左右要有空格 



不过，上面两个例子在现实中毫无意义，因为单纯比较 8px 和 9px 是没有实际应用场景，min 的主场还是在响应式布局上的。我们看个有意义的例子：



<style>
  .css-min {
    width: min(50vw, 300px);
  }

div {
    background-color: pink;
  }
</style>

<div class="css-min">
  min(50vw, 300px)
</div>



解释一下上面的代码，如果视窗小于 600px, 则粉色区域占据一半的视窗宽度（50vw）；反之则宽度保持 300px。效果大约等价于如下传统方式——可以看出 min 代码简洁许多:



​max-width



.css-min {
  width: 50vw;
  max-width: 300px;
}



clamp



刚刚讲了很多min()的内容，接下来进入主题，clamp是什么，先看看官方定义：



clamp()函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。



接下来看个例子：



.css-clamp {
  width: clamp(200px, 50vw, 300px)
}



  • 当屏宽小于 400px 时，首选值（50vw）小比下限（200px），所以返回最小值（200px）
  • 当屏宽介于 400px 和 600px 之间时，首选值（50vw）介于最小值（200px）和最大值（300px）之间时，返回首选值（50vw）
  • 当屏宽大于 600px 时，首选值（50vw）大比上限（300px），使用最大值（300px）



如果用媒体查询，得用下面数行代码来实现：



.css-min {
  width: 50vw;
}

@media ( min-width: 600px ) {
  .css-min {
    width: 300px;
  }
}

@media ( max-width: 400px ) {
  .css-min {
    width: 200px;
  }
}

        

        

            

                report
            

        

    







        
Recommend

        



                

    
About Joyk

    
 





Aggregate valuable and interesting links.

Joyk means Joy of geeK