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

Review of the private domain traffic case of maternal and infant community!

As a private domain operator, many people are cur...

Operational promotion: 4 general methods and techniques to increase followers!

Today, we will share 4 general tips for increasin...

Aion's "Pure Electric Tyrannosaurus Rex" will soon debut at the Beijing Auto Show

On April 23, the "dot projection" of th...

[Sister Yao's 10:30] "Core Survival Skills in the Stock Market" 8 documents

【Sister Yao at 10:30】《Core Survival Skills in the ...

This disease can be fatal in severe cases, so be careful if you have children at home!

Recently, several children in Shifang City, Sichu...

IEA: Natural Gas Market Report for the First Quarter of 2025

The IEA released its "Gas Market Report for ...

Why does being cunning make people smarter?

"Flower-headed" is often used to descri...

Zhuhai Photography Mini Program Customization Price Inquiry, How much does Zhuhai Photography Mini Program Customization cost?

There is no doubt that the topic of mini programs...

[Smart Farmers] Why did this plant make ancient poets feel mixed emotions? Uncover the secrets behind the "darling of poetry"

Your browser does not support the video tag In an...

Monkeypox has been imported into Asia! A picture to understand the "true face" of monkeypox

Since May this year, monkeypox has broken out in ...

How much does it cost to join a lottery app in Fuyang?

How much does it cost to join a lottery app in Fu...

Online event promotion planning and solution analysis

For operators, event operation is a very importan...

Is Huoxiang Zhengqi Water really a "universal" heat-relieving medicine?

This is the 5009th article of Da Yi Xiao Hu In th...

Can smelly socks cause fungal lung infections?

...

What has changed in WeChat in the past eleven years?

On January 6, 2022, the WeChat team’s annual WeCh...