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

The iPad's decline is just the beginning. The tech industry is doomed by a lack of creativity.

"The biggest enemy in life is not others, bu...

Super comprehensive! Comparison of design differences between Android apps and iOS apps

Editor's note: For the same app, why are the ...

360 search text link advertising, introduction to delivery styles and sales methods!

Search text links Search text links are a type of...

Toutiao’s 40-page data report comprehensively analyzes content entrepreneurship!

Over the past year or so, the rising star-like ex...

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

Alibaba Mini Program Investment Company, how much does the designated driver mini program cost?

How much is the cost of recruiting investors in A...

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

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

Did the first fatal accident sound the death knell for Tesla's autonomous driving technology?

The U.S. government announced on June 30 that the...

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

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

On the tenth anniversary of Double 11, a comprehensive summary of strategies and gameplay on major platforms!

Unknowingly, it is already 3 days to the countdow...

Android App Login Screen

Source code introduction: Simple Android App logi...

How to become a master of study Peking University will help you improve your study efficiency 10 times

How to become a master of study Peking University...