How HTML5 enables us to develop applications or page sizes that are suitable for a variety of high-end mobile phones

This article is about:
1, Mobile mobile page of the self-adaptation
2, mobile phone touch manual sliding effect

First, the Header information settings (adaptive)
1. Statement of Information <! DOCTYPE html>
2, encoding settings <meta charset= "UTF-8" >
3, mobile device special settings ( important statement!) )
<meta content= "Width=device-width,user-scalable=no" name= "viewport" >

Viewport Description: This setting allows us to develop a page/product size that adapts to a variety of high-end mobile devices
Width=device-width is the width of the device.
User-scalable=no/yes This feature adjusts the zoom for the user. The default is yes. General set to No
PS: The first attempt to make a mobile page. Pro, because I did not add the viewport statement, resulting in a page.


Second, mobile phone touch manual sliding effect
1, touch screen effect scrolling component (JS must contain part)

<!--Touch screen effect slide component -<Scripttype= "Text/javascript"src= "./js/touch.js"></Script><Scripttype= "Text/javascript"src= "./js/zepto.extend.js"></Script><Scripttype= "Text/javascript"src= "./js/zepto.ui.js"></Script><Scripttype= "Text/javascript"src= "./js/slider.js"></Script><!--Touch screen effect slide component end -

I test the above 4 JS must be included, indispensable.
2, the location of the mobile phone to do the sliding effect (HTML code part)

<Divclass= "Head_nav_c"ID= "Hongye_nav"style= "height:60px;">            <Divstyle= "Background-color:white;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</Div>            <Divstyle= "Background-color:white;">bbbbbbbbbbbbbbbbbbbbbbbbbbb</Div>            <Divstyle= "Background-color:white;">CCCCCCCCCCCCCCCCCCCCCCCCCCCC</Div>            <Divstyle= "Background-color:white;">ddddddddddddddddddddddddd</Div>        </Div>

3, JS code block (the code will automatically generate a piece of code in the HTML code block to add the slide effect)

<Script>Zepto (function($){//Auto-load Zepto components        $("#hongye_nav"). Slider ({//part of the best slider property for HTML corresponding IDAutoPlay:false, //is automaticallyShowdot:false, Loop:true,//whether to loop        }); })</Script>

4. Load Slider.css Style

<link rel="stylesheet" type="text/css" href="Css/slider.css " />

Report:
Another simple notation (for slides)
HTML code Section
<DIV id= "FLA" >


</div>
2. JS Code part
<script>
Creating a Slider component
$ (' #fla '). Slider ();
</script>

Attached: small knowledge
First, the font effect
Color: #FFF Define the colors of the font
text-shadow:0 0 2px #146F61;(css3.0 effects)
CSS3.0 's text Shadow Text-shadow
Syntax: Text-shadow:h-shadow v-shadow blur color;
That is
Text-shadow: "x axis (x offset) Y axis (y offst) blur radius (Blur) color (color)"
For example: text-shadow:5px 5px 5px #FF0000;

Second, the box model rounded angle effect
Border-radius Property
Example:
Div
{
BORDER:2PX solid;
border-radius:25px;
}
Equivalent to:
div{
BORDER:2PX solid;
Border-top-left-radius:2em;
Border-top-right-radius:2em;
Border-bottom-right-radius:2em;
Border-bottom-left-radius:2em;
}

How HTML5 enables us to develop applications or page sizes that are suitable for a variety of high-end mobile phones