移动端开发学习
移动端基础概念
▪ 做移动端（wap）和做PC端区别：
1、系统 PC：Windows/mac区别不大 ； 移动端：ios/android/windows有区别
2、浏览器 PC：区别很大 ； 移动端：区别不大
3、分辨率（尺寸） PC：有区别 ； 移动端：区别很大
调试方法：可在谷歌浏览器的手机模式下查看，但是始终与真机效果有差别，所以还可在sublime里真机测试，不过这里有一个更方便的办法，可将做好的demo地址放入二维码生成器中，生成二维码，手机扫描即可。PS：如何将做好的demo生成二维码？获得本机电脑的ipv4地址（windows+r,输入cmd，进入系统运行界面，ipconfig），再替换到demo地址，进入二维码生成器。
▪ 设备独立像素：屏幕的大小、屏幕的尺寸（别名叫做点points，是个单位），获取window.screen.width/window.screen.height
注意：1、横竖屏切换时，真机里的这个值不会改变，但在模拟器里会切换
2、在一个点里，可以放下多个像素
3、这个值可以通过缩放改变
▪ 设备像素（物理像素）：屏幕的分辨率（实际放的像素值），买手机时厂家告诉你的分辨率，这个值是虚拟的，无法获取
▪ 像素比（DPR，这个值无法改变），缩放的比例=设备像素/设备独立像素，获取window.devicePixelRatio
http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions，可在该网址了解细节
▪ viewport 视口（可视区窗口），通过meta标签设置
未设置时
1、屏幕的高度一般为980，但是不同型号设备相应不同
2、真机与模拟器的值也会不同
3、用window.innerWidth/window.innerHeight方法获取
设置后
Content:视口的相关设置
Width：屏幕的宽度，一般不设置成确定数值，安卓设备有些不支持 device-width:设备的实际宽度 height同理
User-scalable:能否缩放 yes-允许缩放 no-不允许缩放
Initial-scale:初始比例（要与最小比例保持一致） maximum-scale:最大能够缩放的比例 minium-scale:最小能够缩放的比例
1、若设置缩放的话，就把width与user-scalable去掉
2、用了缩放后，并不是真正地缩放了，而是改变了设备的独立像素（屏幕的尺寸）
移动端适配方案
▪ 适配：在不同尺寸的手机设备上，页面相对性的达到合理的展示（自适应）或者保持一定效果的等比缩放（看起来差不多）
适配的元素：1、字体 2、宽高 3、间距 4、图像（图片、图标）这个比较难
适配的方法：1、百分比适配 2、比例缩放适配 3、viewport适配 4、rem适配 5、弹性布局适配
▪ 百分比布局问题（一般情况下，百分比布局配合其他适配方式使用）：
1、百分比的值不好计算
2、需要确定父级元素的大小，因为要根据父级元素的大小进行计算
3、宽度可以设置，但是高度不好设置
▪ 比例缩放适配：把所有机型的设备设置成一致的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--切记一定要写移动端优先-->
<meta name="viewport" content="width=device-width,user-scalable=no"/>
<title></title>
<style type="text/css">
body{
margin:0px;
}
div{
width:25%;
height:500px;
float:left;
}
div:nth-child(1){
background:red;
}
div:nth-child(2){
background:green;
}
div:nth-child(3){
background:blue;
}
div:nth-child(4){
background:pink;
}
</style>
<script type="text/javascript">
(function(){
var curWidth=window.screen.width;
var targetWidth=375;
// 计算缩放比
var scale=curWidth/targetWidth;
// 动态创建meta元素
var meta=document.createElement("meta");
meta.name="viewport";
meta.content="'initial-scale='+scale+',minimun-scale='+scale+',maximum-scale='+scale";
// 将创建好的meta标签插入头部
document.head.appendChild(meta);
})();
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
1、viewport需要通过js动态的设置（不能直接把device设置成数值）
2、通过设置比例（初始比例和缩放比例的），把宽度缩放成
一致的
注意：viewport里给了缩放以后的值后，最终的页面的宽度是拿来的值除以缩放比例
缺点：所有的手机将会看上去是同样大小，没有分别，用户体验非常不好；有时会算出小数，导致有一些误差（无关紧要）
▪ viewport适配跟比例缩放适配相似，看下面的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--切记一定要写移动端优先-->
<meta name="viewport" content="width=device-width,user-scalable=no"/>
<title></title>
<style type="text/css">
body{
margin:0px;
}
div{
width:25%;
height:500px;
float:left;
}
div:nth-child(1){
background:red;
}
div:nth-child(2){
background:green;
}
div:nth-child(3){
background:blue;
}
div:nth-child(4){
background:pink;
}
</style>
<script type="text/javascript">
(function(){
/*
* 320/scale=640
* scale=320/640(设备独立像素/设备像素)=1/2
* scale=414/1242=1/3
*/
// 计算缩放比
var scale=1/window.devicePixelRatio;
// 动态创建meta元素
var meta=document.createElement("meta");
meta.name="viewport";
meta.content="'initial-scale='+scale+',minimun-scale='+scale+',maximum-scale='+scale";
// 将创建好的meta标签插入头部
document.head.appendChild(meta);
})();
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
▪ rem： css3新增的一个相对单位，相对于根节点（html）字体的大小的值
Html{font-size=10px} 2em=20px
通过它可以做到只修改根元素的大小，能成比例地调整所有字体大小，只依赖html字体的大小，在移动端开发里常用。
静态设置rem:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--切记一定要写移动端优先-->
<meta name="viewport" content="width=device-width,user-scalable=no"/>
<title></title>
<style type="text/css">
body{
margin:0;
}
div{
width:4rem;
height:4rem;
background:yellow;
float:left;
}
section{
width:16rem;
height:4rem;
background:pink;
/*在元素佐佑两侧均不允许浮动*/
clear:both;
}
p{
width:2.35rem;/*47px*/
height:2.35rem;
background:gray;
clear:both;
}
</style>
<script type="text/javascript">
window.onload=function(){
// 获取html
var html=document.documentElement;
// 获取整个界面宽度
var width=window.screen.width;
// 在控制台输出
console.log(width);
// 设置根节点字体大小,将屏幕均分成16份，关于被除数，只要以基准换算出来是整数都可以
html.style.fontSize=width/16+"px";
// iphone5下,1rem=320/16=20px
}
</script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<section></section>
<p></p>
</body>
</html>
动态设置rem，方法有二
1、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--切记一定要写移动端优先-->
<meta name="viewport" content="width=device-width,user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="rem.css"/>
<title></title>
<script type="text/javascript">
window.onload=function(){
var html=document.documentElement;
var width=window.screen.width;
// 要有单位px
html.style.fontSize=width/15+"px";
}
</script>
</head>
<body>
<div>1</div>
<div>2</div>
</body>
</html>
创建一个less文件：
//结尾有冒号
@rem:25rem;
body{
margin:0px;
}
div:nth-child(1){
// 只是数值，没有单位了
width:187/@rem;
height:100/@rem;
background:red;
}
//写好以后右键，选择编译，就会编译出一个同名的css文件，没修改一些就要编译一次，css文件里会出现算好的rem值
编译后形成css文件
div:nth-child(1) {
width: 7.48rem;
height: 4rem;
background: red;
}
2、利用HBuilder自带的px转换成rem的功能
点击工具，再选择选项，单击左侧的HBuilder，就会弹出下面的窗口，打开px转rem功能，设置相关参数，就可以直接在css里设置了，此时输入px值会自动换成rem值
1、必须动态地区设置html的大小，才能适配
2、根据页面（注意：是psd图，也就是真实大小）的宽度除以一个系数，把算出类的这个值赋值给html的font-Size属性
特点：1、所有有单位的属性会根据屏幕的尺寸自动加算
2、同样的一个元素，在不同设备下的大小是不一样的，在尺寸小的设备下显示的小，反之，大
3、一般以iphone6为基准，以它的宽度750除上一个系数，再去计算rem
为什么要除以一个数字呢？给你一大屏思考！
1、一个页面里，不可能全部都是整屏的元素，肯定有一行放多个的元素，所以就把一行等分成n份
2、不除以一个数字的话，那1个rem就是一整个屏幕的宽度了，这个值太大，如果元素的宽度比它小的话，不容易计算
3、这个系数可以自己定，建议给一个能整除的值
▪ vw：相对于视口的宽度，视口被均分为100单位的vw
h1 {font-size: 8vw;}
如果视口的宽度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100
▪ px：绝对单位，给多少是多少，不会变，做不到适配，在移动端开发里很少用
▪ em：相对单位，相对于自身字体大小的值
Font-size:12px; 1em=12px
问题：1、chrom下有最小字体限制，必须为12px，所以这个值不能小于12
2、如果有两个一样的元素，但是里面的字体不一样，那就不能统一设置了，或者元素字体变化了，就又要统一设置一遍
▪ 移动端一些问题
1、固定定位问题
固定定位在移动端的兼容性不是很好，以前老版本的某些安卓手机不支持，ios4以前的版本也不支持
qq浏览器下有时候网上滑动的话，就会隐藏掉header
当打开键盘时，固定定位会失效
2、body下的overflow问题
body加了overflow:hidden后，横向没效果（ios），安卓下没问题
▪ 移动端的样式重置
1、连接点击时候，默认有一个背景
-webkit-tap-highlight-color:rgba(0,0,0,0);
2、按钮在ios下都是圆角
-webkit-appearance:none; //清除输入框和按钮的默认外观
Border-radius:0;
3、每台设备里的默认字体是不一样的（移动端设备里大部分没有宋体和微软雅黑）
Font-family:helvetica;
4、横竖屏切换或用户自己通过浏览器设置的话，可以改变字体的大小（需要给body下的所有元素）
-webkit-text-size-adjust:100%;
5、长按文字ios下会选中文字，安卓下无效
-webkit-user-select:none;
6、固定定位在一些ios低版本下不兼容，以及一些国产手机里也不兼容
