移动端开发过程中,因为手机的dpr(设备像素比不同),我们需要根据dpr来修改图标的大小:
一. 2x,3x图片原理:
1. 通过mixin语法, 动态修改background-image。
2. 通过@media (媒体查询),判断设备的dpr。
3. scss代码:
@mixin bg-image($url) {
background-image: url($url + "@2x.png");
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
background-image: url($url + "@3x.png");
}
}
二. 在需要添加这种背景图片的选择器中使用
@include bg-image(图片url中截取@2x.png或者@3.png之前的路径)
比如@include bg-image('../../img/1-'); 是因为期望的图片有../../img/1-@2x.png, ../../img/1-@3x.png;
& .header {
position: relative;
height: 200px;
width: 100%;
background-color: #ff5555;
z-index: 9;
@include bg-image('../../img/1-');
background-repeat: no-repeat;
background-size: cover;
}