Responsive Web pages

Page has the ability to automatically respond to the user's device environment, responsive web design is a website can be compatible with multiple terminals-not for each terminal to make a specific version. Responsive web design is a way of developing and designing a Web site that is designed to make content layouts change with the user using the display. More specifically, this design concept is to allow the original 1292 pixels wide, 4 columns of content, can be well displayed on the 1025-pixel-wide user screen, but also automatically simplified to 2 columns. Of course, making it well adapted to the screens of smartphones and other kinds of computers is a natural thing to do. This particular form of design is a "responsive web design"
Page design and development should be based on user behavior and equipment environment (System platform, screen size, screen orientation, etc.) to respond and adjust accordingly. The concrete practice way is composed of many aspects, including elastic grid and layout, picture, CSS Media query use and so on. Whether the user is using a laptop or an ipad, our pages should be able to automatically switch resolution, image size and related scripting functions to suit different devices, in other words, the page should be able to automatically respond to the user's device environment. Responsive web design is that a website can be compatible with multiple terminals--not a specific version for each terminal.

How to make a responsive web page

A method of responsive web design
After introducing the background and concept of the responsive web, it is time to introduce the specific implementation method, in fact, the method of responsive web design is very simple, is to use CSS3 Media query medium queries and viewport to solve the problem.
First of all, let's take a look at media Queries, and here I'll just make a brief list of them.
Through the setting of media query, we can load different CSS files in different scenes according to the screen width, screen orientation and other properties to render the visual style of the page. There are two specific ways to use this:
1, through the link tag:
<link rel= "stylesheet" type= "text/css" media= "screen and (max-width:479px)" href= "Testcssbywidth1.css"/>
    
The sample code indicates that when the current screen width is less than 479px, the Testcssbywidth1.css file is loaded to render the page.
2, the CSS directly set:
@media screen and (max-width:479px) {
/* Specific CSS property settings */
}
For some of the common properties of media queries, just make a simple list of the common ones, and other properties please check the relevant information for yourselves:
Width: Describes the display area of the terminal device, accepting the max/min prefix;
Height: Description of the terminal equipment display area of the altitude, accept the prefix max/min;
Device-width: Describe the width of the device screen, accept the max/min prefix;
Device-height: Describe the height of the device screen, accept the max/min prefix;
Orientation: Describe the device in the horizontal screen or vertical screen state, the value is: landscape/portrait.
When we adjust the size of the browser, the above through the media query properties of the operation can complete the response of the web design work, but this does not meet the mobile terminal browser, because the mobile browser default page is for the wide screen design, so will reduce him to adapt to the small screen, But the terminal equipment is unable to recognize the correct width, so the media query is not able to solve the mobile device's responsive web design

Now although still do not understand, but will have to understand that day!

Responsive Web pages