The webpage adapts to all screen widths and the webpage adapts to the screen width.

The webpage adapts to all screen widths and the webpage adapts to the screen width.

How can the same webpage be displayed on devices of different sizes? The screen size of a mobile phone is relatively small, and the width is usually below 600 pixels. The screen width of a PC is generally above 1000 pixels, and some reach 2000 pixels. It is not easy for the same content to show satisfactory results on screens of different sizes. Many websites design multiple web pages for different terminals, but there will be a lot of maintenance problems. Here we can design a simple box, this box can identify different terminals and display different effects

1. Add a line of viewport meta tag to the header of the webpage code.

   <Meta name = "viewport" content = "width = device-width, initial-scale = 1"/>

   Viewport is the default width and height of the webpage. The code above indicates that the webpage width is equal to the screen width (width = device-width) by default, and the original scaling ratio (initial-scale = 1) is 1.0, that is, the initial page size accounts for 100% of the screen area.

2.  

   Because the web page will adjust the layout according to the screen width, you cannot use an absolute width layout or an element with an absolute width. This is also true for images.

   Specifically, the CSS Code cannot specify the pixel width:

   Width: xxx px;

   Only percent width can be specified:

   Width: xx %;

   Or

   Width: auto;

3.  

   The font cannot use absolute size (px), but only relative size (em ).

   For example:

   Body {font: normal 100% Helvetica, Arial, sans-serif ;}

   The code above specifies that the font size is 100% of the default page size, that is, 16 pixels.

4.  

   Fluid grid)

   The meaning of "flow layout" is that the positions of each block are floating, not fixed.

   . Main {float: right; width: 70% ;}

   . LeftBar {float: left; width: 25% ;}

   The advantage of float is that if the width is too small and there are no more than two elements, the following elements will automatically scroll below the previous element and will not overflow in the horizontal direction ), the horizontal scroll bar is avoided.

5.  

   The core of "Adaptive Webpage Design" is the MediaQuery module introduced by CSS3.

   It means to automatically detect the screen width and then load the corresponding CSS file.

   <Link rel = "stylesheet" type = "text/css" media = "screen and (max-device-width: 400px)" href = "tinyScreen.css"/>

   The code above indicates that if the screen width is less than 400 pixels (max-device-width: px133, The tinyscreen.css file is used.

   <Link rel = "stylesheet" type = "text/css" media = "screen and (min-width: 400px) and (max-device-width: 600px) "href =" smallScreen.css "/>

   If the screen width is between and, then the smallscreen.css file will be merged.