HTML5移动端手机网站开发流程

2019-01-28 14:58:40王冬梅

手机网站基本框架代码:

XML/HTML Code复制内容到剪贴板
  1. <!doctype html>     
  2. <html>     
  3. <head>     
  4. <meta charset="utf-8">     
  5. <title>手机网站</title>     
  6. <meta name="keywords" content="" />     
  7. <meta name="description" content="" />     
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />     
  9. <meta name="format-detection" content="telephone=no" />     
  10. <meta name="apple-mobile-web-app-capable" content="yes" />     
  11. <meta name="apple-mobile-web-app-status-bar-style" content="black">     
  12. <meta name="author" content="duanliang, duanliang920.com" />     
  13. <style>     
  14.     body{font-size:62.5%;font-family:"Microsoft YaHei",Arial; overflow-x:hidden; overflow-y:auto;}      
  15.     .viewport{ max-width:640px; min-width:300px; margin:0 auto;}      
  16. </style>     
  17.  </head>     
  18.        
  19. <body>     
  20.     <div>     
  21.         大家好!我是段亮,这是我的第一个手机网页哦!      
  22.     </div>     
  23. </body>     
  24. </html>  

下面是我做的基于微信二次开发的手机页面案例:

其实在移动端的开发让我纠结的是在字体单位上的选择。

随着CSS3的兴起,有一种叫rem的单位渐渐的出现在我们的视野中。它是一个相对单位,能实现响应式的那种。它是相对于html根元素来设置当前文字大小,或者宽高的。因为它是一个不固定值,不像PX。听说在PX这个单位在PC和移动的解析不同,所以才使用rem的。这点我也不是很清楚,也请教了一些做手机网站的高手,了解了一些信息。