本文主要是介绍LESS flex布局和2x图方案,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
方案
// flex布局
.flex_func(@justify-content: flex-start, @align-items: center, @flex-direction: row, @flex-wrap: nowrap) {display: flex;justify-content: @justify-content;align-items: @align-items;flex-direction: @flex-direction;flex-wrap: @flex-wrap;
}// 2x图 3x图
.bg-image(@url, @bs: auto, @br: no-repeat) {background-image: ~"url('@{url}@2x.png')";@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {background-image: ~"url('@{url}@3x.png')";}background-size: @bs;background-repeat: @br;
}// 1px线条
.border-1px(@position: bottom, @color: #EAEAEA, @height: 1px, @width: 100%) {position: relative;&::after {content: " ";display: block;position: absolute;@{position}: 0;left: 0;width: @width;height: @height;background-color: @color;transform: scaleY(0.5);}
}
这篇关于LESS flex布局和2x图方案的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!