css 取宽高较小 自适应

对于Web页面设计来说，CSS取宽高较小的技巧是一项非常有用的方法。通过使用这种技巧，我们可以确保Web页面的可视性和适应性，在不同设备和屏幕上都能够非常好的展示。

/* CSS代码 */.example {
      width: min(100vw, 400px);
     /* 设置宽 */  height: min(100vh, 600px);
 /* 设置高 */}
    

如上所示，我们可以通过CSS的min()函数来设置宽度和高度。这个函数会返回参数中最小的那个值。在这个例子中，我们传递了两个参数分别是100vw和400px，100vh和600px。在网页中，vw和vh单位代表网页视窗（即浏览器窗口）的宽度和高度。

如果我们的浏览器窗口宽度小于400px，那么min()函数就会返回100vw，否则就会返回400px。同样的，如果窗口高度小于600px，就会返回100vh，否则返回600px。

这样的代码，可以保证元素不会超出浏览器视窗，同时也不会过度缩小，达到了自适应的效果。这个技巧在响应式设计中非常有用，无论是在移动设备还是桌面设备上都能够很好地显示。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！