Less 编写适配所有设备的 CSS 实践-JavaScript中文网-JavaScript教程资源分享门户

前言

在现代 Web 开发中，前端的布局和样式适配已经成为一个极其重要的问题。由于不同设备的分辨率和屏幕尺寸各不相同，因此一个合适的布局和样式适配方案将极大地提高用户体验。本文将介绍一种基于 Less 的适配方案，帮助前端工程师快速编写适应各种设备的 CSS。

Less 简介

Less 是一种 CSS 预处理器，它扩展了 CSS 语言，增加了变量、混合、函数和运算等特性，使得 CSS 更加灵活和可维护。使用 Less 可以有效地提高 CSS 的编写效率，并减少代码的冗余。

方案介绍

本方案基于 Less，采用了两个关键技术：rem 和媒体查询。其中，rem 是相对于根元素字体大小的单位，而媒体查询则可以根据不同设备的屏幕尺寸和分辨率分别设置不同的样式。

首先，我们需要在根元素中设置字体大小，并定义一个基准宽度。例如：

html {
  font-size: 16px;
}

同时，我们假设基准宽度为 750px 。这是因为我们通常将设计稿的宽度设置为 750px ，并以此为基准进行布局和样式调整。接下来，在 Less 中定义一个 rem 函数，用于将像素单位转换为 rem 单位：

@baseWidth: 750px;

.rem(@property) {
  @{property}: unit(@property / @baseWidth, rem);
}

上述代码中，我们使用了 Less 的变量和函数特性。@baseWidth 变量用于设置基准宽度，而 .rem() 函数可以将任意长度值转换为 rem 单位。我们将这个函数应用到所有可能需要适配的地方，例如字体大小、边框宽度、高度和宽度等。例如：

// javascriptcn.com 代码示例
h1 {
  font-size: .rem(32);
  margin-bottom: .rem(20);
  padding: .rem(10);
}

.btn {
  height: .rem(40);
  width: .rem(120);
  border: .rem(1) solid #ccc;
  border-radius: .rem(5);
}

接下来，我们使用媒体查询设置不同设备的样式。为了方便起见，我们在 Less 中定义了几个常用的分辨率和设备类型。例如：

// javascriptcn.com 代码示例
@largeMobile: ~"only screen and (max-width: 414px)";
@tablets: ~"only screen and (min-width: 768px) and (max-width: 1024px)";
@desktop: ~"only screen and (min-width: 1025px)";

.phone {
  /* 在大于 414px 但小于等于 768px 的设备上显示 */
  @{largeMobile} {
    /* 样式定义 */
    h1 { font-size: .rem(24); }
    .btn { width: .rem(80); }
  }
}

.tablet {
  /* 在平板上显示 */
  @{tablets} {
    /* 样式定义 */
    h1 { font-size: .rem(28); }
    .btn { width: .rem(100); }
  }
}

.desktop {
  /* 在桌面设备上显示 */
  @{desktop} {
    /* 样式定义 */
    h1 { font-size: .rem(32); }
    .btn { width: .rem(120); }
  }
}

上述代码中，我们使用了 Less 的逻辑运算符和字符串插值。逻辑运算符用于组合多个媒体查询条件，而字符串插值则可以将变量或表达式的值插入到字符串中。我们将样式定义分别封装到了 .phone、.tablet 和 .desktop 类的样式中，根据不同的媒体查询条件，分别展示不同的样式。这里省略了部分样式定义，具体见代码示例。

最后，我们在 HTML 中引入 Less 文件，并编译成 CSS 文件：

<head>
  <link rel="stylesheet/less" type="text/css" href="style.less" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.2/less.min.js"></script>
</head>

示例代码

下面是一个完整的示例代码，供参考：

// javascriptcn.com 代码示例
/* 基础定义 */

@baseWidth: 750px;

.rem(@property) {
  @{property}: unit(@property / @baseWidth, rem);
}

/* 样式定义 */

h1 {
  font-size: .rem(32);
  margin-bottom: .rem(20);
  padding: .rem(10);
}

.btn {
  height: .rem(40);
  width: .rem(120);
  border: .rem(1) solid #ccc;
  border-radius: .rem(5);
}

/* 媒体查询定义 */

@largeMobile: ~"only screen and (max-width: 414px)";
@tablets: ~"only screen and (min-width: 768px) and (max-width: 1024px)";
@desktop: ~"only screen and (min-width: 1025px)";

.phone {
  /* 在大于 414px 但小于等于 768px 的设备上显示 */
  @{largeMobile} {
    /* 样式定义 */
    h1 { font-size: .rem(24); }
    .btn { width: .rem(80); }
  }
}

.tablet {
  /* 在平板上显示 */
  @{tablets} {
    /* 样式定义 */
    h1 { font-size: .rem(28); }
    .btn { width: .rem(100); }
  }
}

.desktop {
  /* 在桌面设备上显示 */
  @{desktop} {
    /* 样式定义 */
    h1 { font-size: .rem(32); }
    .btn { width: .rem(120); }
  }
}

总结

本方案利用了 Less 的特性，通过 rem 单位和媒体查询实现了适配所有设备的 CSS 实践。通过抽象公共样式和针对不同的设备类型定义特定样式，可以有效地提高布局和样式适配的效率，并最终提升用户体验。希望本文能够对前端开发者有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/651bdeac95b1f8cacd37a0a9