CSS3 and HTML5 Web design: Response-style web page graphic design

Article Introduction: HTML5 with CSS response-style pictures.

With the gradual popularization of the Retina screen , the adaptation of the pictures in the Web page is becoming more and more demanding. How to let the picture in magnified twice times Retina screen display still clear, once bothered the web developer, fortunately, CSS3 and HTML5 have been focused on changing this situation. So what exactly is a response picture?

What is a response picture?

Response picture refers to: the user agent according to the output device resolution different load different types of pictures, will not cause a waste of bandwidth. At the same time, when the output device type or resolution is changed, the corresponding type of picture can be loaded in time.

CSS response-style picture

For many IOS developers, it may be less unfamiliar, in order to fit the retina screen, the traditional CSS3 implementation is by loading a width of twice times the picture, and then through Media Queries to reduce the background picture size by one times "background-size : 50% 50%;", for example:

?

1 2 3 4 5 6 7 8 9 10 11 12-13

.mod .hd h3 { background-image:url(http://www.csswang.com/wp-content/uploads/2013/01/030234veU.png );/* 普通屏幕 */ /* ———— Retina ———— */ @media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */ only screen and (min–moz-device-pixel-ratio: 2),        /* Firefox 16 之前 */ only screen and (-webkit-min-device-pixel-ratio: 2),    /* Webkit */ only screen and (min-resolution: 240dpi),                    /* 标准 */ only screen and (min-resolution: 2dppx)                      /* 标准 */ { .mod .hd h3{ background-image:url(http://img02.taobaocdn.com/tps/i2/T1t9wzXlxXXXczY8cm-212-310.png); background-size: 106px 155px; } }

Contrast effect of two pictures:

There are some issues to be aware of when making @2x pictures:

If a picture like the one above is plain text, do not zoom directly from the big picture to the small picture, so the text effect will be somewhat distorted, which is the problem of Photoshop rendering. You should adjust the font size, and then rearrange the layout. Can look directly at the effect of the first home

The blue box is the effect of directly scaling the size of the picture, the red box is to change the font size from number 32nd to 16th.

Demo Details:http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

HTML5-Response picture

CSS Image-set solves the problem of the response of the background picture, but what about the IMG element in HTML? Just when I was out of my HTML5, in November 2011 @brucel presented a draft of the bill:

?

1 2 3 4 5 6 7

<picture alt=”"> <source src=hires.png media=”min-width:800px”> <source src=midres.png media=”min-width:480px”> <source src=lores.png> <img src=midres.png alt=”"> picture>

At the same time, other ideas have sprung up, so the responsive Images Community Group, the community discussion group of the consortium, emerged. The latest specification is here: http://picture.responsiveimages.org/. The last update was January 7, 2013, as of the time this article was published, and the specification example:

?

1 2 3 4 5 6 7

<picture width=”500″ height=”500″> <source media=”(min-width: 45em)” srcset=”large-1.jpg 1x, large-2.jpg 2x”> <source media=”(min-width: 18em)” srcset=”med-1.jpg 1x, med-2.jpg 2x”> <source srcset=http://www.webjx.com/css/”small-1.jpg 1x, small-2.jpg 2x”> <img src=http://www.webjx.com/css/”small-1.jpg” alt=”"> <p>Accessible textp> picture>

You can see that the "srcset" property is similar to the image-set, and typically, the resources inside the srcset are fallback, which means that the first picture resource cannot be loaded without skipping the standby resource behind the load. But Apple's Eoconnor proposed a solution like this:

?

1 2 3

<img src=http://www.webjx.com/css/”foo-lores.jpg” srcset=”foo-hires.jpg 2x, foo-superduperhires.jpg 6.5x” alt=”decent alt text for foo.”>

It is true that any new standard will come up with different sounds, which is a good thing, as the end developer of the web is not really concerned with implementing syntax. If you have any questions, you can also go directly to the HTML5 Chinese interest group to participate in the discussion.

Summary

Originally wanted to write the first article of the New Year happy some, but seemingly no slot point. The draft of the HTML5 response picture has just begun, but the outlook is still very good. What we can do now is to use the Image-set attribute value in CSS, because most of the Retina screen devices currently have browsers based on the Webkit kernel and can use Media Queries if there are special requirements.