使用HTML5开发Web移动端APP技巧——入门篇

发布时间： 2016-02-15   作者：本站编辑   浏览次数：

摘要: 一、以配置移动开发环境的方法 很多初学者都因为不知道怎么才能将自己在电脑上写的页面放到手机中测试，其实很简单，只要有以...

一、以配置移动开发环境的方法

很多初学者都因为不知道怎么才能将自己在电脑上写的页面放到手机中测试，其实很简单，只要有以下几个原材料就可以了：

1、XAMMP或其他集成环境

2、自己能用电脑开一个WiFi热点

3、有一个移动设备，并且连接到服务器所在电脑的WiFi上

接下来就可以在手机里像浏览正常网页一样浏览服务器的网页了。

首先打开控制台，输入

然后将你的手机连接到

177.34.22.1:8080/路径地址

点击进入，这样就可以在手机里看到本地服务器里的页面了!测试成本是不是很低！

二、移动设备HTML代码基本结构

在这有两个地方很重要：

1、:

2、

:

三、清楚HTML5默认样式

作为资深的前端开发者，相信这一步大家都不会陌生了，当然也有专门的css文件可以直接引入去除默认样式，但作为一个环节，还是在这写一下吧：

article,aside,canvas,details......(各种省略){

margin:0;

padding:0;

border:0;

font-size:100%;

font:inherit;

vertical-align:baseline;

}

四、响应式设计

响应式设计非常有用，接触前端久一点的人应该都深入的学习过，主要就是通过media query的方式进行设计，例如：

@media screen and (min-width:480px){

//样式

}

这句话就说明了屏幕的宽度大于480的时候显示的样式

五、关于图标

要为自己设计的

114-precomposed.png”>

更多更完善的和图标有关的知识请访问：https://mathiasbynens.be/notes/touch-icons

转载请注明本文出处：

顶

踩