代码之家 › 专栏 › 技术社区 › Maciek

不同设备上的视区和像素密度使图标变得模糊

viewport media-queries css

0

Maciek · 技术社区 · 6 年前

我正在使用视窗和媒体查询使我的网站移动友好。

<meta name='viewport'content='width=device-width,initial-scale=1.0'>

我有一个背景像这样的按钮:

button{
 width:29px;
 height:29px;
 border:1px solid white;
 background:url(add.jpg);
}

在电脑上看起来很简单:

在高像素密度设备上,需要视区标签来正确显示网站。但是图像会被拉伸以显示在新的视窗维度中。

正如你所看到的,即使是图片也上传得更大。所以29px实际上呈现为移动设备上的58px(取决于哪个设备)。图像被拉伸了。

有什么解决办法吗?我发现的唯一一个办法就是不使用图像。有什么想法吗?

1 回复 | 直到 6 年前

1

Jason 6 年前

使用 -webkit-min-device-pixel-ratio 和 min-resolution 媒体查询以提供要在更高dpi显示器上使用的58×58像素图像。

本例假设您已经为高dpi显示创建了一个名为 add@2x.jpg . (The @2x 后缀是本机ios应用程序开发中常用的一种约定,但您可以根据需要为文件命名。)

button{
  width: 29px;
  height: 29px;
  border: 1px solid white;
  background: url(add.jpg);

  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    background: url(add@2x.jpg);
    background-size: 29px 29px;
  }
}

设置 background-size 属性,以便将图像“缩小”为您希望在其中呈现的大小。 CSS pixels .

如果要提供为更高分辨率设备(如iPhone X)优化的图像,可以添加其他媒体查询:

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) { 
  background: url(add@3x.jpg);
  background-size: 29px 29px;
}

2

0

Maciek 6 年前

最好的解决方案是使用和svg。使用Illustrator创建图标,并将其用作网站中的常规图像。

background: url(add.svg);

这是一个普遍的解决办法,将在现在和将来与所有决议一起工作。