HTML5 Mobile page Adaptive mobile screen Four kinds of methods __html

1. Use META Tags: viewport

H5 Mobile end of the page to adapt to the commonly used method, in theory, the use of this tag can be adapted to all sizes of the screen, but the different devices to explain the label and the degree of support caused by the difference is not compatible with all browsers or systems.

Viewport is the viewable area of a user's web page. Chinese can be called "visual area".

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

Viewport label Extremely properties:

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

Detailed description of each property:

Property name	Take value	Describe
Width	Positive integer or Device-width	Defines the width of the viewport, in pixels
Height	Positive integer or Device-height	Defines the height of the viewport, in pixels, usually without
Initial-scale	[0.0-10.0]	Defining initial scaling values
Minimum-scale	[0.0-10.0]	Definition reduces the minimum scale, it must be less than or equal to the Maximum-scale setting
Maximum-scale	[0.0-10.0]	Defines the maximum magnification, which must be greater than or equal to the Minimum-scale setting
User-scalable	Yes/no	Defines whether the user is allowed to scale the page manually, and the default value 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 the element when it is relative, but only relative to the HTML root element. It can be done to modify only the root element proportional to the size of all fonts, but also to avoid the font size of a cascade of composite chain reaction.

Currently, all browsers support REM in addition to IE8 and earlier versions. A statement that writes an absolute unit for browsers that do not support it. These browsers will ignore the font size set with REM. Here's an example:

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

The default HTML font-size is 16px, or 1rem=16px, and you can set 2rem if a div is 32px wide.

Typically, 62.5% is used, or the default 10px, to calculate the value. Of course, this cardinality can be any number, depending on the specific circumstances. Set the method as follows:

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

Specific different screen of the rule definition, that is, the definition of cardinality: can be defined by the CSS, different width range to define different cardinality values, of course, can also be defined through the 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" makes the appropriate changes according to the Font-size attribute value of the HTML you set
        ;

      if (!doc.addeventlistener) return;
      Win.addeventlistener (Resizeevt, Recalc, false);
      Doc.addeventlistener (' domcontentloaded ', Recalc, false);
    }) (document, window);
</script>

3, the use of media inquiries

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

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

For example, if the browser window is less than 500px, the background changes to light blue:

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

4. Percent use

Percentages refer to the parent element, all percentages are the same. The width of the child element is 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) descendants of elements in a percentage positioning (or specify the size) on it, this is only suitable for simple layout of the page, complex page implementation is difficult.

Reprint please indicate the source: http://www.cnblogs.com/wenzheshen/http://zypj01.b2b.qieta.com/