用法:
1.声明变量,@fontSize是要传的参数,注意这个参数,如果要传的是字号,就要驼峰式的@fontSize,如果是想传颜色,就改成@color,如果想传margin-left,就要改成@marginLeft,以此类推…
我们把这个当成一个函数,括号里面的参数可以是常量也可以是变量,也可以传多参。
<style lang="less">
#font (@fontSize){
@media (min-width: 350px) {
font-size: @fontSize;
}
@media (min-width: 414px) {
font-size: @fontSize;
}
@media (min-width: 600px) {
font-size: @fontSize + 5;
}
@media (min-width: 768px) {
font-size: @fontSize + 10;
}
@media (min-width: 800px) {
font-size: @fontSize + 10;
}
@media (min-width: 1366px) {
font-size: @fontSize + 10;
}
@media (min-width: 1920px) {
font-size: @fontSize + 15;
}
}
</style>
2.在需要适配的样式里使用该媒体查询,例如:
.time-box {
position: absolute;
top: 6vw;
color: #333;
opacity: 0.5;
font-size: 12px;
#font(12px);
}
.smallName {
margin: 17px 0px 0px 35px;
text-align: left;
font-size: 20px;
#font(20px);
font-weight: 600;
}
想要更多的机型尺寸请看:《使用chatgpt工具实现媒体查询适配各大厂商手机》
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)