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

Home

Web Front-end

H5 Tutorial

How to make H5 responsive web design

php中世界最好的语言

Jan 11, 2018 am 09:56 AM

html5 response 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.

<meta name="viewport" content="width=device-width, initial-scale=1" />

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

<!--[if lt IE 9]> 
　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]-->

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

<style type="text/css"> 
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;} 
header select{display:none;} 
@media (max-width:960px){ 
    header ul{ display:none;} 
    header select{ display:inline-block;} 
} 
</style> 
<body> 
<header> 
    <ul> 
        <li><a href="#" class="active">Home</a></li> 
        <li><a href="#">AAA</a></li> 
        <li><a href="#">BBB</a></li> 
        <li><a href="#">CCC</a></li> 
        <li><a href="#">DDD</a></li> 
    </ul> 
    <select> 
        <option class="selected"><a href="#">Home</a></option> 
        <option value="/AAA">AAA</option> 
        <option value="/BBB">BBB</option> 
        <option value="/CCC">CCC</option> 
        <option value="/DDD">DDD</option> 
    </select> 
</header> 
</body>

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!