CSS responsive design: No need to adjust HTML random layout page

Article Introduction: CSS in the future and improvement of responsive design.

The importance of images in responsive design:

In response to the design of the image is a key point, different device images have different display specifications, most designers like pixel perfect, normal size of the picture in the high-density equipment display is a piece of excrement, picture big download speed will also increase, some countries flow is very expensive. Also, why do I have a small screen device to download a large size picture? Let's look at ways to solve these problems together.

Elements, HTML5 new tags, use it to let some media query to adapt to the device to meet different images, refer to the code:

<picture width= "750" height= "750" >
<source media= "(min-width:45em)" src=http://www.webjx.com/css/"Large.jpg" >
<source media= "(min-width:18em)" src=http://www.webjx.com/css/"Med.jpg" >
<source src=http://www.webjx.com/css/"Small.jpg" >

<p>accessible text</p>
</picture>

Depending on the size of different equipment to choose a different picture, the default is small.jpg. The program is being discussed by a consortium of professionals and currently has only a few browsers to support it. The second solution to the response design of image dimensions is proposed by Apple, called the "Srcset" attribute, which is based on the HTML tag, which can be referenced in the following code:

src=http://www.webjx.com/css/"Banner.jpg"
srcset= "banner-hd.jpg 2x, banner-phone.jpg 100w, banner-phone-hd.jpg 100w 2x" >

As you can see from the code above, the values in the tag are separated by commas, and different device sizes correspond to pixel images of different paths.

The browser does not support the Srcset property, select the default picture is Banner.jpg
Pixel ratio twice times the adoption of banner-hd.jpg
The use of pixel ratio 100w banner-phone.jpg
At the same time to meet the above two types of choice banner-phone-hd.jpg
Due to the technical complexity and current deficiencies, this method does not currently support any browsers, the background image selection is the same as the above method, but currently can be tested in the Safari 6+ & Chrome 21+ environment.

Background-image:image-set ("Foo.png" 1x, "Foo-2x.png" 2x, "Foo-print.png" 600dpi);

Do not need to adjust HTML to be able to layout freely?

Yes, the most popular solution right now is to use CSS3 flexible box layout model ("Flexbox") and support most mainstream browsers, which allows you to easily rearrange elements on the screen, as described in CSS3 flexible box Layout explained, the following is a simple CSS style reference:

. Parent {
Display:flex;
Flex-flow:column; /* Display items in the list/*
}
. Children {
order:1; /* Change the order of elements * *
}

Another method is similar to the above, but it needs to be used in JavaScript I'm not going to introduce it here. The following describes the last CSS layout method, in the future may be realized, but also my favorite one of the solution. Using the CSS3 style layout, the module works by associating elements with the layout of the "name" typesetting, HTML typesetting according to the elements in the CSS in order to change the location, see the following code:

. Parent {
Display: "AB"
"CD"/* Create CSS Layout interface * *
}
. child1 {
position:a;
}
. child2 {
Position:b;
}
. child3 {
POSITION:C;
}
. child4 {
Position:d;
}

Then there is the pattern of HTML rendering:

The above solution is my personal favorite, intuitive, concise, beginners can also understand, but unfortunately at present just in the envisioning stage, no one developer to achieve it, we have to look forward to the distant future. In this article I simply mention the CSS in the future of responsive design, some technical solutions, in the future we will see.