手机网站基本框架代码:
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>手机网站</title>
- <meta name="keywords" content="" />
- <meta name="description" content="" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
- <meta name="format-detection" content="telephone=no" />
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <meta name="author" content="duanliang, duanliang920.com" />
- <style>
- body{font-size:62.5%;font-family:"Microsoft YaHei",Arial; overflow-x:hidden; overflow-y:auto;}
- .viewport{ max-width:640px; min-width:300px; margin:0 auto;}
- </style>
- </head>
- <body>
- <div>
- 大家好!我是段亮,这是我的第一个手机网页哦!
- </div>
- </body>
- </html>
下面是我做的基于微信二次开发的手机页面案例:
其实在移动端的开发让我纠结的是在字体单位上的选择。
随着CSS3的兴起,有一种叫rem的单位渐渐的出现在我们的视野中。它是一个相对单位,能实现响应式的那种。它是相对于html根元素来设置当前文字大小,或者宽高的。因为它是一个不固定值,不像PX。听说在PX这个单位在PC和移动的解析不同,所以才使用rem的。这点我也不是很清楚,也请教了一些做手机网站的高手,了解了一些信息。









