This is the sixth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

CSS3 Responsive layout

With the development of the Internet era, we have new requirements on the layout of web pages. For example, we may look at web pages through mobile phones or computers, but the size and resolution of mobile phones and computers are different, so it is necessary to require pages to present the same effect on different devices. As a result, a new concept — responsive layout was born. Responsive web design is a kind of web design technology, the design can make the site on different devices to browse the corresponding resolution of the appropriate presentation, reduce the user to zoom, translation and other operations. The real responsive design method is not only to change the layout of the web page according to the size of the visual area, but also to overturn the current design method of the web page on the whole. It is a display mechanism for the perfect layout of the web page of any device, and it solves the page display problem of almost all devices with a set of code.

Set the viewport

width: scalable; Device-width: Indicates the device width minimum-scale: indicates the minimum scaling ratio maximum-scale: indicates the maximum scaling ratio User-Scalable: indicates whether user scaling is allowed

Viewport can calculate the actual display size of CSS pixels according to the resolution DPI value of the device, which is suitable for devices with different resolutions.

Responsive web page open method

1. Fluid grid: a scalable grid with elements of variable size on the layout 2. Elastic image: The image width is not fixed (min-width: 100%) 3. 4. Main breakpoint: critical point of device width (display different pages according to different widths)

Media queries

Media queries are a way to provide different styles to different devices, providing the best experience for each type of user. Css2: Media Type Media Type is a very useful property in CSS2. Media Type allows you to specify specific styles for different devices, thus achieving richer interfaces. Css3: Media Query Media Query is the enhancement of media type by CSS3. In fact, we can regard media Query as media type+ CSS attribute judgment. CSS attribute determination can be just the name of a CSS attribute, or it can be the attribute + value:

<link rel="stylesheet" media="Screen" and "(animation) herf ="..." // If the device supports CSS animation, then the external stylesheet file can be executed.Copy the code
@media screen and (max-width:240px){ 	
}// If the maximum width of the device's browser is 240px, the page will use medium font.
Copy the code

PS: Properties and values are connected by colons, not equals. I. Introduction method of Media Query

1. External references

<link rel="stylesheet" type="text/css" href=".. /css/print.css" media="print" />

2. Introduction of @media

@media screen{selector {property: property value; }}Copy the code

3. Import with @import

  1. @import url(“css/reset.css”) screen;
  2. @import url(“css/print.css”) print;

Media Query instance

Max Width — When the screen is 600px or less, the Web page will be rendered in small. CSS style

<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />

Min Width — When the screen is greater than or equal to 900px, the Web page will be rendered in the big.css style

<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css"  />

3. Multiple Media Queries — Render web pages using style. CSS when the screen is between 600px and 900px

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />

The iPhone. CSS style applies to devices with a maximum Width of 480px, such as an iPhone display, where max-device-width refers to the actual resolution of the Device, i.e. the visual area resolution

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />

5, 4

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

6. IPad — Using portary. CSS in portrait to render the page Use landscape. CSS to render the page in landscape

  1. <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" />
  2. <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"  type="text/css" />

7, the Android

1.<! --240px width --><link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
2.<! --360px width --><link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
3.<! --480px width --><link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />
Copy the code

8. The not keyword — to exclude a specific media type

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

9. Only Indicates the keyword

Only specifies a specific media type and can be used to exclude browsers that do not support media queries. In fact, only is often used to hide stylesheets from devices that do not support Media Query but do support Media Type. The devices are as follows: Devices that support the Media Queries. In this case, only does not exist. For devices that do not support Media Queries but do support Media types, the style will not be read because only is read first instead of Screen. In addition, browsers that do not support Media Qqueries will not use the style regardless of whether only is supported.

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />

The 10style.css style is used for handheld devices with a width of 480px or less, or for devices with screen width of 960px or greater

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />


Rem: the size of the HTML element. Em: the size of the HTML element. Vh /vw: the viewport is divided into 100 parts. Zone viewport width the smallest side of high school is divided into 100 parts