移动端开发
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;}