How to make H5 responsive web design

This time I will show you how to make H5 responsive web design, and what are the precautions 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.

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

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

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

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!

Related reading:

How to implement drag-and-drop function in H5

Summary of block-level tags in H5

About how to handle old versions of browsers that are not compatible with H5 and C3

The above is the detailed content of How to make H5 responsive web design. For more information, please follow other related articles on the PHP Chinese website!