HTML5 Mobile Page adaptive mobile phone screen four methods, html5 adaptive

HTML5 Mobile Page adaptive mobile phone screen four methods, html5 adaptive

1. Use meta tag: viewport

H5 mobile terminal page adaptive universal method, theoretically speaking, using this label can adapt to all sizes of the screen, however, different devices may not be compatible with all browsers or systems because of their different interpretations and support of the label.

 

Viewport is the visible area of the user's webpage. The translation can be called "view area ".

The mobile browser places the page in a virtual "window". Generally, this virtual "window" is wider than the screen, in this way, you do not need to squeeze each webpage into a small window (this will damage the layout of the webpage that is not optimized for the mobile browser). You can view different parts of the webpage through translation and scaling.

 

Extremely attribute of the viewport label:

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

Details of each attribute:

Attribute name	Value	Description
Width	Positive Integer or device-width	Defines the width of the view, in pixels.
Height	Positive Integer or device-height	Defines the height of a view, in pixels. Generally, this parameter is not required.
Initial-scale	[0.0-10.0]	Define the initial scaling Value
Minimum-scale	[0.0-10.0]	Defines the minimum scale, which must be smaller than or equal to the value of maximum-scale.
Maximum-scale	[0.0-10.0]	Defines the maximum zoom-in ratio, which must be greater than or equal to the value of minimum-scale.
User-scalable	Yes/no	Specifies whether to allow users to manually scale pages. The default value is yes.

 

 

 

 

 

 

 

2. Use css3 in rem

Rem is a new relative unit (root em, root em) added to CSS3. It uses rem to set the font size for the element. It is a relative size, but it is only a HTML root element. By using this function, you can adjust the font size proportionally only when modifying the root element, and avoid the chain reaction of compound font size layer by layer.

At present, all browsers except IE8 and earlier versions support rem. For browsers that do not support it, write an absolute unit statement. These browsers ignore the font size set with rem. The following is an example:

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

 

The default font-size of html is 16px, that is, 1rem = 16px. If the width of a div is 32px, you can set it to 2rem.

Generally, 62.5% is used for the convenience of calculation, that is, the default 10 PX is used as the base. Of course, this base can be any value, depending on the actual situation. The setting method is as follows:

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

 

The rule definition on different screens, that is, the basis definition method: You can use CSS to define different base values in different width ranges. Of course, you can also use js to define the rules at a time as follows:

<Script type = "text/javascript"> (function (doc, win) {var docEl = doc.doc umentElement, resizeEvt = 'orientationchang' in window? 'Orientationchang': 'resize', recalc = function () {var clientWidth = docEl. clientWidth; if (! ClientWidth) return; docEl. style. fontSize = 20 * (clientWidth/320) + 'px '; // "20" indicates a proper change based on the font-size attribute value of the html you set.}; if (! Doc. addEventListener) return; win. addEventListener (resizeEvt, recalc, false); doc. addEventListener ('domainloaded', recalc, false) ;}) (document, window); </script>

 

3. Use media queries

Media query is also the method of css3. The problem we need to solve is to adapt to the mobile phone screen. This media query is born to solve this problem.

The function of media query is to set different css styles for different media sets. The "Media" here includes the page size and device screen size.

For example, if the browser window is smaller than 500px, the background will change to light blue:

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

 

4. usage percentage

The percentage refers to the parent element. All percentages are like this. The width of the child element is 50%, and the width of the parent element is 100%;

Therefore, the default width of the body is the screen width (the browser width in the PC). You can locate the child element by percentage (or specify the size). This is only suitable for simple page layout, complex page implementation is very difficult.

Reprinted please indicate the source: http://www.cnblogs.com/wenzheshen/http://zypj01. B2B .qieta.com/