mobile/移动端

移动端开发

1、webapp 手机浏览器访问的页面
2、混合APP webapp html css js 调地理定位、摄像头
混合APP html css js + 一个平台 调用手机的硬件
3、原生app 用android iso平台的语言开发的APP手机硬件

调试工具

1、chrome模拟器
2、真机
1> 电脑 手机 连接同一个路由器 wamp 手机访问电脑ip
2> 上传代码 svn服务器 github服务器 gh-pages coding

手机浏览器

UC webkit
360 webkit
qq webkit x5
百度 webkit
sougou webkit
猎豹 webkit
手机自带浏览器 webkit 二次开发系统 自带浏览器 webkit android原生自带浏览器 webkit

视口 viewport

1、实际像素与逻辑像素
物理像素 /实际像素：屏幕实际的像素;
逻辑像素
举例
iPhone5 ： 320x568
iPhone6 ： 375x667
iPhone6Plus ： 414x736
iPad : 768x1024

大部分默认视窗为980px左右，在移动端开发的时候要改为逻辑像素，也就是在html的head标签上加上图片上的代码即可

再给移动端做项目时，第一件事就是把视窗换掉；手机上的浏览器在渲染web页面的时候，默认情况下不会使用实际像素，也不会使用逻辑像素，一般用980px的视窗大小来进行渲染

开发一个纯移动端的页面，如何布局？

1、百分比布局：视窗要定成设备的逻辑像素，采用统一的尺寸，设计稿中要标清楚在移动端具体的尺寸，布大结构的时候，宽度尽量使用百分比，高度有可能是固定的值、auto，存在问题是特殊布局不能完成，不需要任何rem；（少用了）
2、视窗定死，设计用的是多少，你就进行相应的转化，不需要rem；（少用了）
举例：视窗为375px；，设计稿为750px，那么你若是量出50px就要变为25px，就这样安倍数进行转化即可

3、REM布局：视窗不定死，整个设计图就要等比例进行缩放，rem相对单位，相对于html标签，所以rem只看html中的font-size
320 html{ font-size:100px; } 414 html{ font-size:120px; }
.box{ width:4rem; height:3rem; }
html{}
750px 375px 257px 20px; 40px; 20px;
1px 0.5px 2px 1px
html{ 375/750 *100 font-size:0.5px；}
.box{ width:2.57rem; height:0.40rem; }

顺带说一下rem和em的区别

做为相对长度单位的俩个活宝， 都是以倍数关系定长度，只是参照物不一样，这里就事例分析两者的区别：
1，em 的参照倍数对象为其自身字体大小，font-size;如果没有向上继承；
2，rem的参照倍数对象为根元素，没有了继承父级尺寸这个关系，你自己可以用font-size定义大小，直接参照根元素即可

em尺寸：所有现代浏览器下默认字体尺寸是16px，这时1em=16px。然后你人为的把body里面定义font-size:12px;（把浏览器默认16px改小了），此刻1em=12px，如果0.8em实际等于12px*0.8；em的用处是你要整个网页字体统一变大变小你只要改body里面font-size的值就行了。

另外：em会继承父元素的字体大小，比如：
body{font-size: 16px;}
p{font-size:0.75em;}
span{font-size:2em;}

---