How does html5 mobile page adapt to the screen? Four ways to adapt html5 pages to mobile phone screens

The content of this article is about how to use background-orgin in css3 (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Use the meta tag: viewport

A commonly used method for H5 mobile page adaptation. In theory, using this tag can adapt to all screen sizes. , but each device interprets the tag differently and supports it differently, making it incompatible with all browsers or systems.

viewport is the visible area of ​​the user web page. Translated into Chinese, it can be called "view area".

Mobile browsers place the page in a virtual "window" (viewport). Usually this virtual "window" (viewport) is wider than the screen, so that each web page does not need to be squeezed into a small size. In a window (which would break the layout of webpages that are not optimized for mobile browsers), users can pan and zoom to see different parts of the webpage.

viewport tag and its attributes:

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

Detailed introduction of each attribute:

Attribute name	Value	describe
width	Positive integer or device-width	Define the width of the viewport in pixels
height	Positive integer or device-height	Define the height of the viewport, the unit is pixels, generally not used
initial-scale	[0.0-10.0]	Define initial scaling value
minimum-scale	[0.0-10.0]	Define the minimum reduction ratio, which must be less than or equal to the maximum-scale setting
maximum-scale	[0.0-10.0]	Define the maximum magnification ratio, which must be greater than or equal to the minimum-scale setting
user-scalable	yes/no	Define whether users are allowed to manually zoom the page, the default value is yes

2. Use css3 unit rem

rem is a new relative unit (root em, root em) in CSS3. Use rem as When setting the font size of an element, it is a relative size, but it is only relative to the HTML root element. Through it, you can adjust all font sizes proportionally by modifying only the root element, and you can avoid the chain reaction of compounding font sizes layer by layer.

Currently, all browsers except IE8 and earlier versions support rem. For browsers that do not support it, write an additional absolute unit declaration. These browsers ignore font sizes 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 p is 32px, you can set it to 2rem.

Normally, in order to facilitate the calculation of values, 62.5%, which is the default 10px, is used as the base. Of course, this base can be any value, depending on the specific situation. The setting method is as follows:

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

The specific definition of rules under different screens, that is, the way to define the base: It can be defined through CSS, and different base values ​​can be defined in different width ranges. Of course, it can also be defined once through js as follows:

<script type="text/javascript">
   (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = &#39;orientationchange&#39; in window ? &#39;orientationchange&#39; : &#39;resize&#39;,
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 20 * (clientWidth / 320) + &#39;px&#39;;//其中“20”根据你设置的html的font-size属性值做适当的变化
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener(&#39;DOMContentLoaded&#39;, recalc, false);
    })(document, window);
</script>

3. Use media query

Media query is also a CSS3 method. The problem we want to solve is to adapt to the mobile phone screen. This media query is exactly to solve this problem. And born.

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

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. Use percentage

Percentage refers to Parent element, all percentages are like this. If the width of the child element is 50%, then the width of the parent element is 100%;

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

Recommended related articles:

How to automatically adapt HTML web pages to mobile phone screens_html/css_WEB-ITnose

html5 under development viewport screen adaptation

The above is the detailed content of How does html5 mobile page adapt to the screen? Four ways to adapt html5 pages to mobile phone screens. For more information, please follow other related articles on the PHP Chinese website!