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

I'll tell you at 3 o'clock! Why does your app have no users?

Recently, I have come into contact with some App ...

iPhone 7 isn't released yet, but there's already news about iPhone 8?

Although Apple has released an iPhone product in ...

520 marketing strategy! Here it comes

Although 520 is an ordinary holiday, its pronuncia...

Nibiru G-Pad Android Bluetooth controller review: How to play with your phone

Smartphone hardware performance is becoming more a...

Advertising strategy for Juliang Qianchuan home appliance industry

As the saying goes: An optimizer who does not und...

Kuaishou live broadcast promotion and traffic generation skills!

How effective is Kuaishou live streaming? Everyon...