Method for making H5 response web design

Xiaobian to share the method of making H5 response web design, I believe that most people don’t know much, so share this article to everyone, I hope everyone is reading this article. Let us let us know together!


Step 1: On the head of the web code, join a line viewport metal tag

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

All mainstream browsers support this setting, including IE9. For those old browsers (mainly IE6, 7, 8), CSS3-MediaQueries.js

    
Width: auto; / width: XX%;

width: auto; / width: xx%;

  Step 3: (Note) The font size  
The font size is 100% of the default size of the page, that is, 16 pixels

font do not use absolute size “PX”, Use relative size “Rem”

Step 4: Flow layout

The meaning of “flow layout” is that the position of each block is floating, not fixed

The advantage is that if the width is too small, it can’t put two elements, the back elements will automatically scroll below the front elements, and will not overflow in the horizontal direction, avoiding the emergence of horizontal scroll bars

Step 5: Choose Loading CSS

“Adaptive Web Design”Heart is the Media Query module introduced by CSS3. Automatically detect the screen width, then load the corresponding CSS file

img {max-width: 100%;} video {max-width: 100%; height: auto;} Header ul Li {float: Left; list-style: none; list-style-type: none; margin-right: 10px;}} @Media (Max-Width: 960px) {header ul { Display: none;} header select {display: inline-block;}}

 Home     AAA 
The above is all the contents of the method of H5 response web design, thank you for reading! I believe everyone has a certain understanding, I hope to share the content to everyone.Helped, if you want to learn more knowledge, please pay attention to Tumi Yun Industry Information Channel!
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment