css3span等高

I'm loving responsive design and am slowly updating all my websites to support mobile browsers as well as tablets. Currently Hanselman.com (this site), Hanselminutes.com (my weekly podcast), SpeakingHacks.com (a video I sell on how to be a better presenter) as well as LostPhoneScreen.com (where I sell my Windows Phone 7 application.)

我喜欢响应式设计，并且正在慢慢更新我的所有网站以支持移动浏览器和平板电脑。 目前， Hanselman.com (此站点)， Hanselminutes.com (我的每周播客)， SpeakingHacks.com (我出售如何做一个更好的演示者的视频)以及LostPhoneScreen.com (我在其中出售Windows Phone 7应用程序的地方)。 )

All of this "mobilization" has stemmed from my frustration with other folks' sites that look lousy on my phone. It's SO frustrating to reach a site that could take 10 minutes and make its mobile experience 100% better.

所有这些“动员”都源于我对手机上看起来很烂的其他人的网站的不满。 到达可能需要10分钟才能让其移动体验提升100％的网站实在令人沮丧。

Now that I've updated my main sites I'm tidying up a few things that continue to bug me. On my iPhone 4S with a DPI of 326 dpi, the logo on my site and a few other graphics look lousy. Why?

现在，我已经更新了我的主要站点，然后整理了一些继续困扰我的事情。 在DPI为326 dpi的iPhone 4S上，我网站上的徽标和其他一些图形看起来很糟。 为什么？

Well, for example, the image for the logo is a PNG that is literally 100px by 100px. This is a foreground image (not a CSS background image on an elements, yes, people still use those) and it has its height and width both set to 100px. The size of the image and the img tag are both really 100x100.

好吧，例如，徽标的图像是一个PNG，字面意思是100px x 100px。 这是前景图像(不是元素上CSS背景图像，是的，人们仍然使用这些图像)，并且其高度和宽度都设置为100px。 图片和img标签的大小实际上都是100x100。

You can see that not only is the logo blurry but the search magnifying glass and social icons are as well. That's because the browser has scaled up the images to manage the super high-res display of this device. Better that they scale it up than make it too tiny. The overall size of all the other elements on the page are scaled up as well so the fonts and form elements like the dropdown are crystal clear.

您可以看到不仅徽标模糊，搜索放大镜和社交图标也是如此。 这是因为浏览器已按比例放大图像以管理此设备的超高分辨率显示。 最好是将它们放大而不是使其变得很小。 页面上所有其他元素的整体大小也会按比例放大，因此字体和表单元素(如下拉列表)非常清晰。

There's a few ways to fix this.

有几种方法可以解决此问题。

支持(高DPI)视网膜显示和CSS背景图像 (Support (High DPI) Retina Display with CSS Background Images)

Since I am already using CSS Media Queries to change my site's CSS for smaller screens like this already:

由于我已经在使用CSS Media Queries来更改我的网站CSS，以适应较小的屏幕，如下所示：

@media screen and (max-width:720px){

}

I can certainly do the same and detect high resolution displays. It's not just the iPhone. A lot of the newer Nokias and HTCs have displays over 200dpi.

我当然可以这样做，并检测高分辨率的显示器。 不只是iPhone。 许多较新的诺基亚和HTC的显示都超过200dpi 。

I could create a media query like this:

我可以这样创建媒体查询：

@media screen and (min-device-pixel-ratio: 2) {

}

Or do conditional inclusion like this (or -webkit-min-device-pixel-ratio):

或执行以下条件包含(或-webkit-min-device-pixel-ratio)：

 rel="stylesheet" href="justforhighres.css" media="screen and min-device-pixel-ratio: 2">

Do your testing and be aware you likely need to use both the webkit prefix and one without:

做测试，并注意您可能需要同时使用webkit前缀和不使用以下两者的前缀：

only screen and (-webkit-min-device-pixel-ratio : 2),only screen and (min-device-pixel-ratio : 2) {}

You may decide that 1.5 is a better ratio for you.

您可能会认为1.5是一个更好的比率。

The WebKit folks are thinking about this and I could use background-size like this:

WebKit的人们正在考虑这个问题，我可以像这样使用background-size：

div {  background: url(logo-low.png);  background: url(logo-high.png) 0px 0px / 100px 100px;}

处理前景图像(带有IMG标签) (Handling Foreground Images (with the IMG tag))

Ideally I should be using SVG (Scalable Vector Graphics) for my images like the magnifying glass and they'll scale everywhere. Until that day (and until I'm willing to redo all my images), I can take advantage of the way the IMG tag has always worked. We know that nothing is sadder than a small image that has been scaled up by incorrect width= and height= tags.

理想情况下，我应该对像放大镜之类的图像使用SVG(可缩放矢量图形)，并且它们可以随处缩放。 在这一天之前(直到我愿意重做所有图像)，我可以利用IMG标签始终有效的方式。 我们知道，没有什么比不正确的width =和height =标签放大的小图像更令人痛心的了。

Since my image is only 4k, I decided to make a high-res 200x200 image and mark the width and height attributes to 100px. Stated differently, I'm sending more pixels than needed and scaling them down. The result is that it looks clear on high res displays and the same as it did before on regular displays. Here is a screenshot with the retina Logo file.

由于我的图片只有4k，因此我决定制作一个高分辨率200x200的图片，并将width和height属性标记为100px。 换句话说，我发送的像素超出了需要，并按比例缩小。 结果是，它在高分辨率显示器上看起来很清晰，与以前在常规显示器上一样。 这是视网膜徽标文件的屏幕截图。

It is true that I'm sending more data than I need to here. I am sending a 4kb image when the 100x100 original is 2kb. I can solve this by  swichign to a background image and using the conditional CSS options outlined above.

的确，我发送的数据比这里需要的更多。 当100x100原始尺寸为2kb时，我将发送4kb图像。 我可以通过贴合背景图像并使用上面概述的条件CSS选项来解决此问题。

In this case it's a reasonable tradeoff and I'm happy with the result. It's a good solution for small images like this. For the social images I will likely want to sprite them and create both regular and "@2x.png" versions of the sprite.

在这种情况下，这是一个合理的权衡，我对结果感到满意。 对于像这样的小图像，这是一个很好的解决方案。 对于社交图像，我可能会希望对其进行精灵化，并创建精灵的常规版本和“ @ 2x.png”版本。

小，中，大，全尺寸 (Small, Medium, Large, FullSized)

The problem isn't just with high-res images, it's also that we want to send the minimum number of bytes across the 3G wire while still offering the mobile user the chance to download the full sized images if they want.

问题不仅仅在于高分辨率图像，还在于我们希望在3G线上发送最少数量的字节，同时仍为移动用户提供他们下载所需全尺寸图像的机会。

I really wish that LowSrc still worked. I was talking to Jeremy Keith about this last week and he mentioned he just blogged the same thing! This was how we did things when we were all still on dialup. (And as Jeremy points out, we also often used ALL CAPS and omitted quotes! ;) )

我真的希望LowSrc仍然有效。 上周我在和杰里米·基思( Jeremy Keith)谈论这个话题，他提到他只是在写博客！ 当我们仍然处于拨号状态时，这就是我们的工作方式。 (正如Jeremy指出的，我们也经常使用ALL CAPS并省略引号！;))

It seems that LOWSRC just died, however. Ironically LOWSRC only works in OLD browsers. This is a shame as it was/is useful.

看来LOWSRC刚刚死了。 具有讽刺意味的是， LOWSRC仅在旧浏览器中有效。 很遗憾，因为它曾经有用。

Mat at AListApart mentions another side of this idea using a fullsrc attribute, except with data- for HTML5 compliance with an idea from Scott Jehl.

AListApart的Mat提到了使用fullsrc属性的想法的另一面，除了数据-符合Scott Jehl的想法HTML5兼容。

It's unfortunate that there isn't a clear and comprehensive technique yet to handle both the low-res, fullsrc and highdpi solution. Today you can achieve them all with some CSS3 and some jQuery/JavaScript.

不幸的是，目前还没有一种清晰而全面的技术来处理低分辨率，fullsrc和highdpi解决方案。 今天，您可以使用一些CSS3和一些jQuery / JavaScript来实现它们。

A correct image tag should take into consideration:

正确的图片标签应考虑以下因素：

• Connection speed (detected as well as user-overridden)
连接速度(检测到并覆盖用户)
• Screen DPI (pixel density)
屏幕DPI(像素密度)
• Responsive design image resizing
自适应设计图像大小调整

I think a solution clearly needs to be baked into HTML5 with a solution like the ones that Mat Marquis outlines. The question before us is do we update the IMG tag or are we talking about a new tag?

我认为解决方案显然需要使用Mat Matquis概述的解决方案引入HTML5中。 我们面临的问题是我们是更新IMG标签还是谈论新标签？

相关链接 (Related Links)

• Hire and Pay a Designer and Be Happy

  雇用并付钱给设计师并感到高兴

• Easy steps to a mobile-friendly responsive design with an embedded YouTube video and a fluid resize

  通过嵌入式YouTube视频和流畅的尺寸调整，轻松实现适合移动设备的自适应设计

• Skip Intro - CSS3 is the new Flash

  跳过简介-CSS3是新的Flash

翻译自: https://www.hanselman.com/blog/supporting-highdpi-pixeldense-retina-displays-like-iphones-or-the-ipad-3-with-css-or-img

css3span等高