下是4种纯Less实现的响应式方案,均封装成可复用方法。
// 定义设备断点变量
@mobile-max: 767px;
@tablet-min: 768px;
@tablet-max: 1024px;
@desktop-min: 1025px;
// 设备混合
.mobile(@rules) {
@media (max-width: @mobile-max) {
@rules();
}
}
.tablet(@rules) {
@media (min-width: @tablet-min) and (max-width: @tablet-max) {
@rules();
}
}
.desktop(@rules) {
@media (min-width: @desktop-min) {
@rules();
}
}
// 使用示例
.header {
font-size: 16px;
.mobile({
font-size: 14px;
padding: 8px;
});
.tablet({
font-size: 15px;
padding: 12px;
});
.desktop({
font-size: 18px;
padding: 20px;
});
}
// 参数化混合
.device(@type, @rules) {
& when (@type = mobile) {
@media (max-width: 767px) { @rules(); }
}
& when (@type = tablet) {
@media (min-width: 768px) and (max-width: 1024px) { @rules(); }
}
& when (@type = desktop) {
@media (min-width: 1025px) { @rules(); }
}
}
// 使用示例
.navbar {
height: 40px;
.device(mobile, {
height: auto;
flex-direction: column;
});
.device(tablet, {
height: 50px;
padding: 0 15px;
});
}
// 通用响应式混合
.responsive(@min, @max, @rules) {
& when not (@min = 0) and not (@max = 0) {
@media (min-width: @min) and (max-width: @max) { @rules(); }
}
& when (@min = 0) {
@media (max-width: @max) { @rules(); }
}
& when (@max = 0) {
@media (min-width: @min) { @rules(); }
}
}
// 使用示例
.card {
width: 100%;
// 手机
.responsive(0, 767px, {
margin: 5px;
});
// 平板
.responsive(768px, 1024px, {
width: 48%;
margin: 8px;
});
// PC
.responsive(1025px, 0, {
width: 23%;
margin: 10px;
});
}
// 带设备方向检测
.orientation(@device, @dir, @rules) {
& when (@device = mobile) and (@dir = portrait) {
@media (max-width: 767px) and (orientation: portrait) { @rules(); }
}
& when (@device = mobile) and (@dir = landscape) {
@media (max-width: 767px) and (orientation: landscape) { @rules(); }
}
& when (@device = tablet) {
@media (min-width: 768px) and (max-width: 1024px) { @rules(); }
}
}
// 使用示例
.gallery {
grid-template-columns: 1fr;
.orientation(mobile, landscape, {
grid-template-columns: repeat(2, 1fr);
});
.orientation(tablet, _, {
grid-template-columns: repeat(3, 1fr);
});
}
方案选择建议:
参与评论
手机查看
返回顶部