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

Practical traffic diversion skills for Douyin (Part 1)

In order to help you learn the course better, tod...

Introducing 5 data-driven and practical customer acquisition methods

Admittedly, in many cases, the acquisition of new...

Promotional Marketing: A brief discussion on vlog’s brand marketing and traffic monetization!

With the vigorous development of the Internet sho...

Samsung products have been in trouble in China because of its arrogance and disregard for Chinese users.

As one of the world's top technology companie...

Food Safety | How to choose and eat soy sauce? Teach you how to quickly identify good soy sauce

...

Android custom thread pool programming practice

1. Introduction to Executor After Java 5, concurr...

The teacher is so cool! Looking back at the famous scenes of teaching in space

September 10, 2023 is the 39th Teachers' Day ...

iOS 9.3 new feature: Wi-Fi Assistant clearly identifies traffic consumption

Since the new Wi-Fi Assistant feature was added to...

Youqianhua application tips revealed! Teach you how to borrow money smoothly!

Since online lending platforms became popular, ma...

5,000 words to reveal the dilemma of live streaming traffic!

I have done a point-to-point breakdown of the ope...

WeChat launches "Medical Insurance Electronic Certificate": One code for seeing a doctor and buying medicine

On January 13, Tencent announced that the "M...

Three serious misunderstandings about information flow advertising targeting. Whoever steps on them will suffer. Let’s take a look…

After reading this article, I hope you can improv...

How to analyze user needs and build a user system?

1. What is the user system? Before talking about ...

HTTP in iOS Just look at me

[[164463]] This article is a contributed article....

The number of 5G mobile phone terminal connections of the three major operators reached 497 million

On December 23, according to the latest statistic...