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

How can low-frequency App operations improve user activity?

APP operation and promotion should be carried out...

Are you sensitive to your sleeping environment? 5 ways to help you desensitize

There are many factors that affect sleep, includi...

Jiuzhaigou earthquake, brands must stop issuing blessing posters!

Yesterday (August 8) at 9:19 p.m., a magnitude 7....

The most tricky kind of meat in supermarkets, I don't recommend buying it, it's a waste of money

In the past two years, the price of pork was rela...

How was the first New Year's Day of New China celebrated?

[The Origin of New Year’s Day in China] September...

Tencent advertising effectiveness evaluation: key data indicator analysis!

Key data indicators Data monitoring is a critical...

Influenza A has entered its peak period. What are the differences between its symptoms and those of COVID-19?

Recently, influenza A has entered its peak period...

Hackers are happy: wearable products may become a new gold mine

The new products launched one after another at the...

Analyze three classic theories to extract inspiration and skills for advertising creativity

The importance of creativity in advertising has b...

Shao Yiding of Youpengpule: It is unethical for Internet TV not to make a profit

"Is Internet TV good?", "Yes!"...

How much does it cost to join a dance school mini program in Qiandongnan?

How much does it cost to join Qiandongnan Dance S...

Thinking about the whole process of brand planning

A brand is a trust in a company and its products ...

A Python introductory course that even novices can understand

Introduction to Python introductory course resour...

How much does it cost to develop a small program for high-end glasses in Foshan and try on glasses?

As the functions of mini programs continue to imp...

Webb telescope's more precise observations make scientists more confused about the expansion of the universe

Our universe is expanding, and an important "...