Introduction to Web-responsive design

With the advent of Internet-based devices and the rapid development of technology, the environment used to display Web pages varies widely. For example, mobile phones have many kinds of screen sizes, while personal computer monitors constantly refresh the resolution record. Traditional fixed-width (such as 960 pixels) Web design has not been able to meet the individual needs of mobile users to browse the Web, so the responsive web design is born.

The first to propose responsive web design (responsive) is the American Ethan Marcotte, which integrates and names three of existing development techniques (media and media queries, streaming layouts, and elastic images). Responsive web design is a display mechanism to perfect the layout of Web content for any Web device, which can make the Web page respond to different browsing devices, dynamically adjust the layout structure and the specification style of elements, and present the same content to different users in different layouts.

Media Query

Media query is the core of responsive web design method. But before we go into the media, let's talk about media types.

There is a very useful media type feature in CSS2 that allows you to define which media to display Web pages. Web pages can be displayed on displays, paper media, or auditory browsers. Common media types are all and screen, print, and so on.

Several common ways to use media types are as follows:

Method One:

<link href= "style.css" media= "screen print" ...

Method Two:

@import url ("style.css") screen;

Method Three:

@media screen{Selector{rules}}

Media query is an enhancement to the media type in CSS3, which can be thought of as a media type + CSS attribute, allowing CSS to be more precise in different media or different conditions of the same media. Here's a look at the media query rules.

For example: @media all and (min-width:800px) {...}

The first "@media all" is actually the media type, which means that it works on all media. You can also change to "@media screen" or "@media print". "and" is a relational word, followed by an attribute condition, with a minimum viewport width of 800 pixels. In the final curly brace is the CSS style, where the user can write a style that is greater than or equal to 800 pixels.

The concept of "viewport" is mentioned here and it is necessary to explain its relationship to screen size here. Viewports and screen sizes are not the same concept. A viewport is a content area within a browser window that does not contain toolbars, tab bars, and so on. This is the area where the page is actually displayed. The screen size refers to the physical display area of the device. It is important to note that some browser resizing tools display dimensions that contain other elements of the browser, such as the Address bar, the tab bar, and the search bar, while some tools do not.

Relationship words all and and are not required. When you apply a media query to all media types, all is omitted. The following and is optional. You can rewrite media queries using shorthand syntax, as follows

@media (min-width:800px) {...}

If you use a relational word, you can achieve more complex media query results. For example, if you want to create a style that is applied only when the minimum width is 640 pixels and the maximum width is 1366 pixels, it can be written as follows:

@media (min-width:640px) and (max-width:1366px) {...}

If you want to add additional criteria to check the specific screen orientation, simply include another and keyword followed by the Orientation media query:

@media (min-width:640px) and (max-width:1366px) and (orientation:portrait) {...}

Media queries can only be activated when the width is 640 to 1366 pixels and the orientation is portrait oriented.

There are also or in the relationship words. As with and, these conditions combine to form complex expressions. If one of these conditions is true, then the entire expression or two conditions that are detached are true.

@media (min-width:640px) or (orientation:portrait) {...}

If the width is at least 640 pixels or the orientation is vertical, the rule is applied.

Another media query relationship that is saved in the Thesaurus is not. At the beginning of the media query, not ignores the result. In other words, if the query is true without the NOT keyword, it will now be false.

@media (not min-width:640px) {...}

The following CSS rules are applied when the minimum width is not 640 pixels.

There are many features of the media, but to design a responsive site, you need to know only a few media features: direction, width, and height. As a simple media feature, the value of the direction can be portrait or landscape. These values apply to users who hold a phone or tablet, allowing you to optimize content based on two shape factors.

Second, flow-type layout

While recognizing the power of media queries, we also want to see its limitations. Fixed-width designs that use only media queries to accommodate different viewports will only mutate from one set of CSS media query rules to another, with no smooth gradients between them, and cause pages outside the rule width to be scrolled horizontally for full browsing. To solve this problem, we need to use a flow layout that defines the width of the page as a percentage and sets the style to float.

One of the features of streaming layouts is the percent layout. Percentage layout When the user zooms in to the browser window, the content is hidden and the horizontal scroll bar appears, compared to the layout with a specific size. Ethan Marcotte provides a simple formula: The target element width ÷ the parent element width = percent width. It is important to note, however, that the adjacent elements of an element are defined in percentages, so that the page can be rendered in a consistent layout in any size device.

Flow layout, there is also a technology is the flexible box layout. has been supported by modern browsers. The flexible box layout model is primarily used to control the arrangement between HTML elements. In the past, the use of float to control the arrangement of elements in CSS, people need to use a large number of numerical calculations to ensure the precise location of elements. Elastic boxes are designed to help developers quickly and accurately locate elements. For example, to implement a three-column layout, the middle is a fixed width, the two sides are free scaling. Previously, we had to use JS to do some calculations to constantly set the width of the elements on both sides to achieve scaling to maintain a three-column layout. Now with the elastic box model of CSS can be easily implemented.

Three, elastic pictures

To adapt the image to scale, you typically use CSS to set the width of the image to 100%, which allows the picture to maintain a specific scale in the layout. But as the browser zooms in, the image becomes blurred when the actual size of the picture exceeds the size of the image itself. An effective solution is to replace the image with a larger size in time. This is also known as a responsive picture.

The idea of responsive images is proposed by filament group, which means that the user agent loads different types of images according to the resolution of the output device, does not cause the waste of bandwidth, and can load the corresponding type of pictures in time when changing the output device type or resolution. The general principle is to use the JS script to detect the current device viewport size, according to the test results to load different sizes of pictures. At present, there are some JS plug-ins at home and abroad, are better to achieve this function, but all have advantages and disadvantages, in the development of the need to choose the use of the actual situation. In addition to using JS, there are some other ways to implement.

It is also important to note that in the retina screen, images need to be loaded in order to maintain clarity. In CSS4 's draft, a new method is defined for Background-image, Image-set, which can load different images depending on the pixel density of the screen, for example:

#test {

Background-image:url (assets/no-image-set.png);

Background-image:-webkit-image-set (URL (assets/test.png) 1x,url (assets/test-hires.png) 2x);

Background-image:-moz-image-set (URL (assets/test.png) 1x,url (assets/test-hires.png) 2x);

Background-image:-o-image-set (URL (assets/test.png) 1x,url (assets/test-hires.png) 2x);

Background-image:-ms-image-set (URL (assets/test.png) 1x,url (assets/test-hires.png) 2x);

}

Of course, the function of media query can also be used to determine the different pixel density ratio, such as:

/*-------------Retina-------------*/

@media only screens and (-O-MIN-DEVICE-PIXEL-RATIO:2/1),/* Opera */

Only screen and (min--moz-device-pixel-ratio:2),/* before Firefox 16 */

Only screens and (-webkit-min-device-pixel-ratio:2),/* WebKit */

Only screen and (MIN-RESOLUTION:240DPI),/* standard */

Only screen and (MIN-RESOLUTION:2DPPX)/* Standard */

{

#test {

Background-image:url (assets/test-hires.png);

}

}

corresponding to the Image-set resolution background image, the Srcset attribute in the IMG element solves the problem of loading different images under the HD screen. For example:

But at present Image-set and Srcset have not become the official standard. Fewer browsers are supported.

Speaking of which, some key technologies about the response have already been introduced. The key is the flexible use of existing technologies. The advantages are obvious: there is a strong match at different terminals and at different resolutions; Just a set of code saves the cost of development and maintenance to a certain extent. But not all sites are suitable for responsive layouts, and responsive layouts are not all-purpose. The main shortcomings of the response are: compatible with a variety of equipment workload, inefficient; The code is cumbersome, there will be hidden useless elements, loading time is longer; this is a compromise of the design of the solution, a variety of factors impact and not achieve the best results. So if the budget is adequate and the user experience requires high site, make a real "mobile version" of the site is preferred.

Of course, the technical development related to the response has just begun, simple and powerful seemingly contradictory, in fact, from the perspective of development is not contradictory, perfect is the goal of human pursuit. For example, CSS3 has not officially released the time, there is already a css4 figure. The problem of response will also be well solved in the constant change of technology.

Introduction to Web-responsive design