Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you the relevant knowledge points about the method of adapting to the mobile phone screen on the HTML5 mobile page. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

1. Use the meta tag: viewport

H5 Mobile Page adaptation is a commonly used method, theoretically speaking, the use of this tag can adapt to all sizes of the screen, but different devices interpret and support the tag so that it is not compatible with all browsers or systems.

Viewport is the visual area of the user's web page. Translated into Chinese, it can be called "visual area".

Mobile browsers place pages in a virtual "viewport" that is usually wider than the screen, so that instead of squeezing each page into a small window (which destroys the layout of pages that are not optimized for mobile browsers), users can pan and zoom to see different parts of the page.

The viewport tag and its attributes:

A detailed description of each attribute:

The attribute name takes a value to describe Width < / td > positive integers or? Device-Width < / td > defines the width of the viewport in pixels Height < / td > positive integers or? Device-Height < / td > defines the height of the viewport in pixels. Generally, the initial zoom value minimum-scale [0.0-10.0] is not used by initial-scale to define the minimum zoom ratio. It must be less than or equal to the maximum-scale setting maximum-scale [0.0-10.0] to define the maximum magnification. It must be greater than or equal to the minimum-scale setting user-scalableyes/no definition whether to allow users to manually zoom the page. Default value yes

2. Use css3 unit rem

Rem is a new relative unit of CSS3 (root em, root em). When you use rem to set the font size for an element, it is a relative size, but the opposite is only the HTML root element. Through it, all font sizes can be adjusted proportionally only by modifying the root element, and the chain reaction of compound font size layer by layer can be avoided.

Currently, all browsers except IE8 and earlier versions support rem. Write an absolute unit declaration for browsers that do not support it. These browsers ignore the font size set with rem. Here 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.

In general, 62.5%, the default 10px, is used as the cardinality to facilitate the calculation of values. Of course, this base can be any number, depending on the circumstances. The setting method is as follows:

Html {font-size:62.5%

Rule definition under different screens, that is, how to define cardinality: you can define different cardinality values in different width ranges through CSS, or you can define cardinality at one time through js:

(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 = 20 * (clientWidth / 320) + 'px';// where "20" makes appropriate changes according to the font-size attribute value of html that you set

}

If (! Doc.addEventListener) return

Win.addEventListener (resizeEvt, recalc, false)

Doc.addEventListener ('DOMContentLoaded', recalc, false)

}) (document, window)

3. Use media to query

Media query is also the method of css3, we have to solve the problem is to adapt to the mobile phone screen, this media query is to solve this problem.

The function of media query is to set different css styles for different media, where the "media" includes page size, device screen size and so on.

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

@ media only screen and (max-width: 500px) {

Body {

Background-color: lightblue

}

}

4. Percentage of usage

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

So the default width of body is the screen width (PC refers to the browser width). The descendant elements can be positioned (or specified size) by percentage, which is only suitable for pages with simple layout and difficult to implement for complex pages.

These are all the contents of this article entitled "what are the ways to adapt to the mobile phone screen on the HTML5 mobile page?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.