Less中实现响应式设计的4种高效方案（手机、平板、电脑端）
下是4种纯Less实现的响应式方案，均封装成可复用方法。方案1：基础设备混合封装
// 定义设备断点变量
@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;
});
}方案2：参数化设备查询
// 参数化混合
.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;
});
}方案3：可配置断点混合
// 通用响应式混合
.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;
});
}方案4：设备方向增强版
// 带设备方向检测
.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);
});
}方案选择建议：
[*]基础混合：适合明确的三段式断点需求
[*]参数化混合：需要动态选择设备类型时使用
[*]可配置断点：适合需要灵活调整断点的项目
[*]方向增强：需要处理横竖屏差异时使用
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]