HTML5 移动设计基础

移动开发
yellow桌面网站设计多是固定布局或流布局,而移动网站中我们应该使用流体布局,它可以适应不同设备大小。

桌面网站设计多是固定布局或流布局,而移动网站中我们应该使用流体布局,它可以适应不同设备大小。

搭建html框架

  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>移动设计</title> 
  7.  
  8.     <link rel="stylesheet" href="css.css"/> 
  9. </head> 
  10. <body> 
  11. <header> 
  12.     <h1>移动设计开发</h1> 
  13. </header> 
  14. <div> 
  15.     <ul> 
  16.         <li>我的名字是利奥</li> 
  17.         <li>我的网站: http://forjs.org</li> 
  18.         <li>我的QQ 1405491181</li> 
  19.         <li>我的微信号 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>

基本CSS

  1. html,body,ul,li,h1
  2.     margin:0
  3.     padding:0
  4.  
  5. body{ 
  6.     padding:5px
  7.  
  8. ul{ 
  9.     list-stylenone
  10.  
  11. li{ 
  12.     border-radius: 5px
  13.     background-color#eee
  14.     padding:10px 5px 10px 5px
  15.     margin:5px 0

基本效果

纵向效果

横向效果

加入 css 媒体查询支持

  1. @media screen and (min-width800px){ 
  2.     body{ 
  3.         padding:0 200px
  4.     } 

当设备屏幕大于800px时调用。

责任编辑:闫佳明 来源: forjs.org
相关推荐

2011-05-11 12:59:18

HTML5

2011-12-28 15:32:46

HTML5移动App

2015-07-22 16:44:51

HTML5优化

2014-03-18 09:20:17

HTML5移动开发

2011-11-28 13:15:25

HTML5移动应用

2015-05-13 10:04:36

ionicHtml5

2011-12-12 10:08:39

jQuery MobiHTML5

2011-05-25 09:34:30

HTML5cssjavascript

2011-09-02 17:04:13

Sencha ToucHTML5图表库

2011-04-21 10:24:24

HTML5

2014-12-22 15:02:48

HTML5移动应用开发

2012-02-20 13:45:26

HTML5移动开发程序

2011-11-28 10:03:29

HTML5移动应用

2015-03-26 14:04:57

2012-02-23 10:28:43

AppCanHTML5移动应用

2013-01-24 10:26:04

HTML5HTML 5HTML5的未来

2012-06-25 11:49:17

ibmdw

2011-05-12 16:01:51

HTML5

2011-04-08 15:41:03

2013-08-02 17:09:43

CloudberryHTML5云手机平台
点赞
收藏

51CTO技术栈公众号