HTML5 Mobile Design Basics

HTML5 Mobile Design Basics

Desktop website design is mostly fixed layout or flow layout, while mobile websites should use fluid layout, which can adapt to different device sizes.

Building the HTML framework

  1. <!DOCTYPE html >  
  2. < html >  
  3. < head >  
  4. < meta   charset = "utf-8" />  
  5. < meta   name = "viewport"   content = "width=device-width,initial-scale=1.0, maximum-scale=1.0" />  
  6. < title > Mobile Design </ title >  
  7.  
  8. < link   rel = "stylesheet"   href = "css.css" />  
  9. </ head >  
  10. < body >  
  11. < header >  
  12. < h1 > Mobile Design and Development </ h1 >  
  13. </ header >  
  14. < div >  
  15. < ul >  
  16. < li > My name is Leo </ li >  
  17. < li > My website: http://forjs.org </ li >  
  18. < li > My QQ 1405491181 </ li >  
  19. < li > My WeChat ID: forjs_org </ li >  
  20. </ ul >  
  21. </ div >  
  22. < footer >  
  23. &copy; 2014 < a   href = "http://forjs.org" > forjs.org </ a >  
  24. </ footer >  
  25. </ body >  
  26. </ html >

Basic CSS

  1. html,body,ul,li,h 1 {
  2. margin : 0 ;
  3. padding : 0 ;
  4. }
  5.  
  6. body{
  7. padding : 5px ;
  8. }
  9.  
  10. ul{
  11. list-style : none ;
  12. }
  13.  
  14. li{
  15. border-radius: 5px ;
  16. background-color : #eee ;
  17. padding : 10px   5px   10px   5px ;
  18. margin : 5px   0 ;
  19. }

Basic Effects

Vertical effect

Horizontal effect

Add css media query support

  1. @media screen and ( min-width : 800px ){
  2. body{
  3. padding : 0 200px ;
  4. }
  5. }

Called when the device screen is larger than 800px.

<<:  WeChat Enterprise Accounts Dialogue with Enterprise Mobile Platform

>>:  How do technical founders choose non-technical partners?

Recommend

Here are all the ways to improve your APP’s monetization capabilities!

How can an app with hundreds of thousands, million...

Cortana UI is like this now, why don’t you chat with it?

Hey, Cortana: Your mission is to make your daily ...

Counterpoint: Global connected car sales to grow 8% year-on-year in 2024

According to the latest report from Counterpoint,...

What situations may cause bidding keyword ideas to fail to pass the review?

[1]. Baidu itself has two answers to this questio...

Shapers of Earth's history: Are meteorites "destroyers" or "midwives"?

Tuchong Creative In the long history of the Earth...

If you are bitten by a five-step snake, is it okay to take four steps?

Ding ding ding ~ Fantastic beasts are coming! Tad...

Android App Login Screen

Source code introduction: Simple Android App logi...