如何在 LESS 中实现响应式图片
在当前移动互联网时代，响应式设计已经不可避免。随着设备屏幕尺寸日益多样化，如何让同一份代码在不同屏幕下都能达到最佳的显示效果成为了前端工程师面临的一项巨大挑战。
其中一个重要的方面就是响应式图片处理。通过 LESS，我们可以很方便地实现响应式图片。
步骤
- 创建 mixin
首先，我们要创建一个 LESS mixin，利用其中的 media query 来设置不同屏幕下所显示的图片。
/*
- mixin：responsive-image
- width1：屏幕宽度起始值
- width2：屏幕宽度结束值
- image：图片 URL */ .responsive-image(@width1: 0, @width2: 768px, @image: none) { background-image: url(@image); @media (min-width: @width1) and (max-width: @width2) { background-image: url(@image); } }
在以上代码中，我们定义了一个 mixin，其中包含三个参数：
- @width1：屏幕宽度起始值；
- @width2：屏幕宽度结束值；
- @image：图片 URL。
首先，我们通过 @image 来设置 background-image 样式，实现默认状态下的图片显示。接着，利用 media query 分别设置不同屏幕下的图片显示情况。
- 应用 mixin
接下来，我们需要将已经创建好的 mixin 进行应用。通过将 mixin 应用到 CSS 类中，我们可以轻松设置一些响应式图片样式。
假设我们需要在行内元素中使用响应式图片，我们可以创建一个类名为 responsive-image 的类。并在其中配置需要的响应式图片：
.responsive-image { .responsive-image(0, 480px, 'small.jpg'); .responsive-image(481px, 768px, 'medium.jpg'); .responsive-image(769px, 992px, 'large.jpg'); }
在以上代码中，我们利用之前定义好的 mixin 分别为不同屏幕尺寸配置对应的图片。具体来说：
- 当屏幕宽度小于或等于 480px 时，显示 small.jpg；
- 当屏幕宽度大于 481px 且小于或等于 768px 时，显示 medium.jpg；
- 当屏幕宽度大于 769px 且小于或等于 992px 时，显示 large.jpg。
- 进一步优化
上述代码实现了基本的响应式图片处理，但我们可以进一步完善它。
首先，我们可以设置一些默认值，为 mixin 中的参数提供初始值。这样，对于某些参数无需进行操作的情况下，我们可以避免一些繁琐的代码编写。
/*
- mixin：responsive-image
- width1：屏幕宽度起始值，默认为 0
- width2：屏幕宽度结束值，默认为 768px
- image：图片 URL，默认为 none */ .responsive-image(@width1: 0, @width2: 768px, @image: none) { background-image: url(@image); @media (min-width: @width1) and (max-width: @width2) { background-image: url(@image); } }
接着，我们可以为 mixin 中的参数设置变量，方便后面进行统一管理。
@small: 480px; @medium: 768px; @large: 992px;
最后，我们可以将 mixin 中的 media query 部分提炼出来，形成一个单独的 mixin，减少代码嵌套使用时的代码量。
/*
- mixin：mq
- width1：屏幕宽度起始值
- width2：屏幕宽度结束值 */ .mq(@width1, @width2) { @media (min-width: @width1) and (max-width: @width2) { & { @content(); } } }
最终代码如下：
@small: 480px; @medium: 768px; @large: 992px;
.mq(@small+1, @medium-1) { .responsive-image('small.jpg'); }
.mq(@medium+1, @large-1) { .responsive-image('medium.jpg'); }
.mq(@large+1) { .responsive-image('large.jpg'); }
在以上代码中，我们利用之前提炼出来的 mixin 将媒体查询与图片设置分离，使得代码更加简便易读。
结论
通过上述的 DEMO，我们学习到了如何利用 LESS 实现响应式图片。通过 mixin 的方式，我们可以为不同的屏幕宽度设置不同的图片，让页面在不同设备上都能够展示出最佳的效果。
LESS 提供了强大的工具，帮助我们减少代码编写的繁琐度。希望读者们在实际开发中，能够灵活运用 LESS，提升开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67510c38050cf9039c19a113