在跨屏平台上创建一个免费的响应式网站 立即创建

移动见解博客

The great Ethan Marcotte gave us a simple instruction when it came to dealing with responsive media. All we had to do was apply two CSS rules to a few elements and everything would work perfectly.

To be fair to Ethan, he was mostly correct.  Adding the following code


img {
    width: 100%;
    max-width: 100%;
}
CSS

… and then extending that simple block out to


img, iframe, object, embed, video {
    width: 100%;
    max-width: 100%;
}
CSS

…. and you are pretty much done with your flexible responsive images.

Pffft….

Solving part of the problem

Yes you now have flexible media, but unfortunately it leaves us with a series of issues.

What happens if the user is on a slow connection? Well surely we want to serve them a smaller image.

What happens if the user has a retina screen? Well surely we want to serve them a 2x or 3x size image.

What happens if both of those scenarios are correct?  Oh no!

There are many techniques you can use to

加微信好友