Responsive design-media queries and responses to media queries

Responsive design-media queries and responses to media queries

Media Query

Media query only supports IE9 +, chrome, ff, and other browsers. Browsers under IE8 can download and reference respond. js,

Statement:

<! -- [If lt IE 9]>
<Script src = "respond. js"> </script>
<! [Endif] -->

Attributes that can be detected by media queries:
1. width: width
2. height
3. device-width: Specifies the surface width (for us, the screen width of the device)
4. device-height: rendering the surface height (for us, the screen height of the device)
5. orientation check whether the device is in the horizontal or vertical direction
6. aspect-ration is based on the aspect ratio of the viewers' width and height.
A ratio display can be defined as aspect-ration: 16/9;
7. device-aspect-ration Based on the aspect ratio of the device rendering plane
8. The number of BITs in each color, for example, min-color: 16, checks whether the device has a 16-bit color.
9. Number of colors in the color-index device color index table. The value must be a non-negative integer.
10. monochrome checks the number of digits used by each pixel in the monochrome frame buffer. The value must be a non-negative integer.
11. resolution is used to detect the screen or printer resolution, for example, min-resolution: 300 dpi,
It can also accept the measurement value of pixel points per centimeter, for example, min-resolution: 118 dpcm;
12. scan the TV set
Progressive row-by-row Scan
Interlace Line Scan
For example, a 720 p hd TV (p indicates a row-by-row scan) matches scan: progressive.
1080i hd TV (I indicates interlace scan) matching scan: interlace
13. The grid is used to check whether the output device is a network device or a bitmap device.

1-11 can have min-And max-to create a query range, while 12-13 does not

Statement:

1. Check whether the media attribute on the link is loaded and changed to css.

Eg:<Link rel = "stylesheet" type = "text/css" media = "screen and orientation: portrait" href = "css/__style.css"/>

Orientation: portrait means that the display is vertical, yes, loading and changing css
Not at the beginning of a media query. The query logic is reversed.
And is and |
, Or
　　2. css file external link css file

@ Import url ("phone.css") screen and (max-width: 360px);/* load when the maximum screen width is less than 360px */
3. Direct Writing:

@ Media screen and (max-width: 980px ){
Body {
Background: # f0f;
Font-size: 12px;
}
}

 
How to design responsive web pages

Responsive Web Design Method
After introducing the background and concepts of responsive Web, it is time to introduce the specific implementation methods. In fact, the method of responsive Web design is very simple, media Queries and Viewport Queries in CSS3 are used to solve the problem.
First, let's take a look at Media Queries. Here I will just give a simple list of them.
Through media query settings, we can load different CSS files in different scenarios to render the visual style of the page based on the screen width, screen direction, and other attributes. You can use either of the following methods:
1. link label:
<Link rel = "stylesheet" type = "text/css" media = "screen and (max-width: 479px)" href = "testcssbywidth1.css"/>

The example code indicates that when the front screen width is less than 479px, the testcssbywidth1.css file is used to render the page.
2. Set directly in CSS:
@ Media screen and (max-width: 479px ){
/* Specific CSS attribute settings */
}
For some common attributes of Media Queries, just give a simple list of common attributes. For other attributes, please refer to the relevant materials:
Width: the width of the display area of the terminal device. It must be prefixed with max/min;
Height: the height of the display area of the terminal device. It must be prefixed with max/min;
Device-width: the width of the screen of the terminal device, which is prefixed with max/min;
Device-height: the height of the screen of the terminal device, which is prefixed with max/min;
Orientation: it indicates whether the terminal device is in the landscape or landscape. The values are landscape/portrait.
When we adjust the browser size, the above operations through the media query attribute can complete the responsive Web design, but this does not meet the needs of mobile terminal browsers, because the default page of a mobile browser is designed for a wide screen, it will be scaled down to adapt to a small screen, but the terminal device cannot recognize the correct width, therefore, media queries alone cannot solve the responsive Web design of mobile terminal devices.

How is a responsive website designed?

Step 2: Meta tag (view demo) most mobile readers enlarge the HTML page into a wide view (viewport) to conform to the screen resolution. You can use the meta tag of the view to reset it. The view label below tells the reader to use the width of the device as the view width and stop the initial scaling. Add this meta tag to the head tag. Step 2: HTML structure in this example, I have a basic page layout that includes the header, content, sidebar, and footer. The header has a fixed height of 180 pixels, the content container is 600 pixels, And the sidebar is 300 pixels. Step 2: Media Query-Media QueriesCSS3 Media Query-Media Query is the core of the responsive design. It informs the reader based on the conditions to specify the width of the view to render the page. When the view width is less than or equal to 980 pixels, the following rules take effect. Basically, I will set the width of all containers from the pixel value to the percentage to make the container size adaptive. If you need responsive website design, we will release the collection task on Product 1 Weike. Millions of professional Weike networks will provide you with the best design services. View Original post>

Remember to adopt it.