Less中实现响应式设计的4种高效方案（手机、平板、电脑端）

下是4种纯Less实现的响应式方案，均封装成可复用方法。
方案1：基础设备混合封装

1. // 定义设备断点变量
2. @mobile-max: 767px;
3. @tablet-min: 768px;
4. @tablet-max: 1024px;
5. @desktop-min: 1025px;
7. // 设备混合
8. .mobile(@rules) {
9.   @media (max-width: @mobile-max) {
10.     @rules();
11.   }
12. }
13. .tablet(@rules) {
14.   @media (min-width: @tablet-min) and (max-width: @tablet-max) {
15.     @rules();
16.   }
17. }
18. .desktop(@rules) {
19.   @media (min-width: @desktop-min) {
20.     @rules();
21.   }
22. }
24. // 使用示例
25. .header {
26.   font-size: 16px;
27.   
28.   .mobile({
29.     font-size: 14px;
30.     padding: 8px;
31.   });
32.   
33.   .tablet({
34.     font-size: 15px;
35.     padding: 12px;
36.   });
37.   
38.   .desktop({
39.     font-size: 18px;
40.     padding: 20px;
41.   });
42. }

复制代码

方案2：参数化设备查询

1. // 参数化混合
2. .device(@type, @rules) {
3.   & when (@type = mobile) {
4.     @media (max-width: 767px) { @rules(); }
5.   }
6.   & when (@type = tablet) {
7.     @media (min-width: 768px) and (max-width: 1024px) { @rules(); }
8.   }
9.   & when (@type = desktop) {
10.     @media (min-width: 1025px) { @rules(); }
11.   }
12. }
14. // 使用示例
15. .navbar {
16.   height: 40px;
17.   
18.   .device(mobile, {
19.     height: auto;
20.     flex-direction: column;
21.   });
22.   
23.   .device(tablet, {
24.     height: 50px;
25.     padding: 0 15px;
26.   });
27. }

复制代码

方案3：可配置断点混合

1. // 通用响应式混合
2. .responsive(@min, @max, @rules) {
3.   & when not (@min = 0) and not (@max = 0) {
4.     @media (min-width: @min) and (max-width: @max) { @rules(); }
5.   }
6.   & when (@min = 0) {
7.     @media (max-width: @max) { @rules(); }
8.   }
9.   & when (@max = 0) {
10.     @media (min-width: @min) { @rules(); }
11.   }
12. }
14. // 使用示例
15. .card {
16.   width: 100%;
17.   
18.   // 手机
19.   .responsive(0, 767px, {
20.     margin: 5px;
21.   });
22.   
23.   // 平板
24.   .responsive(768px, 1024px, {
25.     width: 48%;
26.     margin: 8px;
27.   });
28.   
29.   // PC
30.   .responsive(1025px, 0, {
31.     width: 23%;
32.     margin: 10px;
33.   });
34. }

复制代码

方案4：设备方向增强版

1. // 带设备方向检测
2. .orientation(@device, @dir, @rules) {
3.   & when (@device = mobile) and (@dir = portrait) {
4.     @media (max-width: 767px) and (orientation: portrait) { @rules(); }
5.   }
6.   & when (@device = mobile) and (@dir = landscape) {
7.     @media (max-width: 767px) and (orientation: landscape) { @rules(); }
8.   }
9.   & when (@device = tablet) {
10.     @media (min-width: 768px) and (max-width: 1024px) { @rules(); }
11.   }
12. }
14. // 使用示例
15. .gallery {
16.   grid-template-columns: 1fr;
17.   
18.   .orientation(mobile, landscape, {
19.     grid-template-columns: repeat(2, 1fr);
20.   });
21.   
22.   .orientation(tablet, _, {
23.     grid-template-columns: repeat(3, 1fr);
24.   });
25. }

复制代码

方案选择建议：

• 基础混合：适合明确的三段式断点需求
  
• 参数化混合：需要动态选择设备类型时使用
  
• 可配置断点：适合需要灵活调整断点的项目
  
• 方向增强：需要处理横竖屏差异时使用
  

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！