How to make H5 responsive web design-H5 Tutorial-php.cn

This time I will show you how to make H5 responsive web design, and what are theprecautions for H5 responsive web design. The following is a practical case, let's take a look.

This article introduces the implementation of HTML5 responsive (adaptive) web design and shares it with everyone. The details are as follows:

Step one: Add a line of viewport meta tags to the head of the web page code.

Copy after login

viewport is the default width and height of the web page. The above line of code means: the web page width is equal to the screen width by default (width=device-width), the original scaling ratio (initial-scale=1) is 1.0, that is, the initial size of the web page occupies 100% of the screen area.

All major browsers support this setting, including IE9. For those old browsers (mainly IE6, 7, 8), you need to use css3-mediaqueries.js

Copy after login

Step 2: (Note) Do not use absolute width, font size

width:auto; / width:XX%;

Copy after login

Step 3: (Note) Font size

The font size is 100% of the default size of the page, that is, 16 pixels

Do not use the absolute size "PX" for the font, but use the relative size "REM"

Step 4: Flow layout

The meaning of "flow layout" is that the position of each block is It is floating, not fixed

The advantage is that if the width is too small to fit two elements, the following element will automatically scroll to the bottom of the previous element and will not move in the horizontal direction

overflow(overflow), avoiding the appearance of horizontal scroll bars

Step 5: Choose to load CSS

The core of "adaptive web design" is the Media Query module introduced by CSS3 . Automatically detect the screen width, and then load the corresponding CSS file

    Home
 AAA
 BBB
 CCC
 DDD

Copy after login

I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!