How does the HTML5 mobile page fit into the screen? Four ways to HTML5 page Adaptive phone screen

This article brings you the content is about CSS3 in the use of Background-orgin (with code), there is a certain reference value, the need for a friend can refer to, I hope you have some help.

1. Using META Tags: viewport

H5 Mobile page Adaptive general use of the method, in theory, the use of this label can be adapted to all sizes of the screen, but the device of the explanation of the label and the level of support is not compatible with all browsers or systems.

Viewport is the viewable area of the user's Web page. Translation into Chinese can be called "viewport".

The mobile browser is to put the page in a virtual "window" (viewport), usually this virtual "window" (viewport) wider than the screen, so that you do not have to squeeze each page into a very small window (this will destroy the layout of the page without the optimization of the mobile browser), Users can view different parts of a Web page by panning and zooming.

Viewport Tag Extreme Properties:

<meta name= "viewport" content= "width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no "/>

A detailed description of each property:

Property name	Take value	Description
Width	Positive integer or Device-width	Defines the width of a viewport in pixels
Height	Positive integer or Device-height	Defines the height of the viewport, in pixels, generally not
Initial-scale	[0.0-10.0]	Defining initial scaling values
Minimum-scale	[0.0-10.0]	Defines the minimum scale to be reduced, which must be less than or equal to the Maximum-scale setting
Maximum-scale	[0.0-10.0]	Defines the magnification maximum scale, which must be greater than or equal to the Minimum-scale setting
User-scalable	Yes/no	Defines whether the user is allowed to manually scale the page, the default value is Yes

2. Use CSS3 unit REM

REM is a new relative unit of CSS3 (root em, root em), which uses REM to set the font size for an element, which is relative in size, but is relative to the HTML root element. It can not only modify the root element to adjust the size of all fonts proportionally, but also to avoid the size of the font-level composite chain reaction.

Currently, in addition to IE8 and earlier versions, all browsers support REM. Write an absolute unit declaration for browsers that do not support it. These browsers ignore font sizes that are set with REM. Here's an example:

p {font-size:14px; font-size:.875rem;}

The default HTML font-size is 16px, that is 1rem=16px, if a p width of 32px you can set to 2rem.

Typically, a value of 62.5% is used for calculation purposes, which is the default 10px as the base. Of course, this base can be any value, depending on the situation. The Setup method is as follows:

html{font-size:62.5% (10/16*100%)}

Specific different screen rule definition, that is, the basis of the definition of the way: can be defined by the CSS, different width range to define different cardinality values, of course, can also be defined by JS method as follows:

<script type= "Text/javascript" >   (Function (Doc, win) {      var docel = doc.documentelement,        resizeevt = ' Orientationchange ' in window? ' Orientationchange ': ' Resize ',        recalc = function () {          var clientwidth = docel.clientwidth;          if (!clientwidth) return;          DocEl.style.fontSize = (clientwidth/320) + ' px ';//where "20" is based on the value of the HTML font-size attribute you set to make the appropriate change        };      if (!doc.addeventlistener) return;      Win.addeventlistener (Resizeevt, Recalc, false);      Doc.addeventlistener (' domcontentloaded ', Recalc, false);    }) (document, window);</script>

3. Use media query

Media query is also a CSS3 method, we have to solve the problem is to adapt to the mobile phone screen, this media query is to solve this problem is born.

The function of media query is to set different CSS styles for different media, the "media" includes page size, device screen size, etc.

For example: If the browser window is less than 500px, the background will turn light blue:

@media only screen and (max-width:500px) {    body {        background-color:lightblue;    }}

4. Percentage of Use

Percentage refers to the parent element, and all percentages are the same. child element Width 50%, then the width of the parent element is 100%;

So the body default width is the screen width (the PC middle finger is the browser width) descendant elements are positioned as a percentage (or a specified size), which is only suitable for layout-simple pages, and complex page implementations are difficult.