解决 LESS 编写的样式在不同屏幕上显示不同的问题
在前端开发中，我们通常使用 LESS 或者 Sass 来编写样式，以便更加高效地管理样式表和减少代码冗余。但是，随着移动端设备的普及，我们不可避免地遇到了一个问题——同一份样式在不同的屏幕上显示效果差异明显，要怎么解决呢？
1. 使用媒体查询
媒体查询是 CSS 的一个强大功能，它可以根据设备的不同属性来应用不同的样式。我们可以根据屏幕设备的宽度，修改字体、间距、布局等样式，让页面在不同的设备上显示效果更为一致。
以下是一个示例代码：
-- -------------------- ---- -------
-- ----- ----- ----------- --
------ ------ --- ----------- ------ -
---- -
---------- -----
------------ ----
-
-
-- ------- ----- ----------- --
------ ------ --- ----------- ------ -
---- -
---------- -----
------------ --
-
-
2. 使用 REM 单位
在移动端开发中，我们通常使用 REM 单位来进行样式设计。REM 的全称是 "root em"，是相对于根元素（HTML 元素）的单位。
我们可以根据不同设备的屏幕宽度来设置根元素（HTML 元素）的字体大小，然后在其他样式中使用 REM 单位，这样可以实现样式在不同屏幕上的适配。
下面是一个示例代码：
-- -------------------- ---- -------
-- ----- ----- --------------------- --
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-
-- ------- ----- --------------------- --
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-
-- -- --- -- --
---------- -
------ ------
-------- -------
---------- -------
-3. 使用 viewport 单位
viewport 是指浏览器显示网页的区域，我们可以使用 viewport 单位来进行样式设计。使用 viewport 单位可以根据设备的屏幕大小来设置元素的宽度和高度，以便在不同设备上适配。
下面是一个示例代码：
-- -------------------- ---- ------- -- ---- -------- ----- -- --------- - ------ ------------- ------- -------------- - -- -- -------- -- -- ---------- - ------ ----- ------- ---- -------- ---- -
总结
以上三种方法都可以有效地解决样式在不同屏幕上显示不同的问题。媒体查询适用于针对不同屏幕的样式变化较为复杂的情况；使用 REM 单位可以让样式根据不同屏幕的字体大小进行适配；使用 viewport 单位可以根据不同设备的屏幕大小进行适配。我们可以根据实际需求选择合适的方法来进行样式设计。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6493db3648841e98941716a4