标签：put console points 基本 fse span 自动 高度 move
1、像素比：
点、points （抽象单位 ）
像素渲染 （栅格化）
物理像素 （调整大小）
dpi、ppi
获取像素比 （window.devicePixelRatio）
2、viewport（视口）
width 设备宽度 [pixel_value | device-width]
user-scalable 是否允许缩放 （no||yes）
initial-scale 初始比例
minimum-scale 允许缩放的最小比例
maximum-scale 允许缩放的最大比例
target-densitydpi (已淘汰)
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />
同时设置initial-scale和minimum-scale、maximum-scale的值都相同，双保险兼容。
根据不同设备JS动态控制比例 1/像素比：动态生成viewport
<script>
//获取设备的像素比
//console.log(window.devicePixelRatio);
//控制比例:1/像素比
var pixelRatio = 1 / window.devicePixelRatio;
//通过js动态设置视口(viewport)
document.write(‘<meta name="viewport" content="width=device-width,initial-scale=‘+pixelRatio+‘,minimum-scale=‘+pixelRatio+‘,maximum-scale=‘+pixelRatio+‘" />‘);
</script>
3、单位比较
1）px 绝对（固定）单位
缺点：任何情况下都是固定值，会导致布局在不同尺寸的设备下错位
2）%相对单位（会有影响发生变化） 相对于父级（自身）大小进行计算
缺点：能确定范围的还是比较好计算的，对于不太好确定值的地方不好使用百分比。并且，会导致变形。
3）em 相对单位（会有影响发生变化） em = 当前字体大小
缺点：会根据当前容器字体大小发生变化，假如每个容器字体大小不一致，那么计算会非常麻烦。
4）rem 相对单位：1rem=设置html的字体大小。只依赖于html字体大小。r = root、em = 字体大小 font size。
动态设置rem，适配所有移动设备：
<script>
// 条件：尺寸越大，则字体大小越大。尺寸越小，则字体大小越小。
// 获取html节点
var html = document.getElementsByTagName(‘html‘)[0];
// 获取屏幕宽度
var pageWidth = html.getBoundingClientRect().width;
//或者通过document.documentElement.clientWidth获取宽度
// 设置html的font-size大小：屏幕宽度 / 固定数值 = 基准值（基准值任何整数都行）
html.style.fontSize = pageWidth / 16 + "px";
</script>
横竖屏适配：
setRem();
window.addEventListener("orientationchange", setRem); //手机适配事件
window.addEventListener("resize", setRem); //方便chrome查看
function setRem() {
var html = document.querySelector("html");
var width = html.getBoundingClientRect().width;
html.style.fontSize = width / 16 + "px";
}
4、布局步骤
1）确定尺寸（设计稿） 并且还得在符合该尺寸的模拟器下进行第一次预览
2）搭建大体框架
1）[固定定位]元素内容中有[input]的话，会导致触发键盘之后导致固定定位错位。(换成绝对定位解决)
2）不管使用背景图还是img，一定要调整对应的size（大小）
如果图片大小和容器大小一致，那么可以使用100%
如果图片大小和容器带下不一样，那么需针对图片分别设置宽/高、x/y
3）碰到文字，一定要测量行高，不然高度会不准确
4）标签的特性需要熟记于心
5、标签兼容：
1)固定定位fixed不兼容，为实现position：fixed：
设置html的overflow为hidden，隐藏滚动条
设置body的overflow为auto，把滚动条给body
html{
width: 100%;
height: 100%;
overflow: hidden;
}
body{
width: 100%;
height: 100%;
overflow: auto;
}
header{
width:100%
height:xxrem;
position:absolute;
top:0;
left:0;
}
2)取消a标签手指按下时出现的黑色遮罩层
a,input,button{
-webkit-tap-highlight-color: transparent;
text-decoration: none;
}
3) 解决IOS下的表单元素圆角的问题
input,button{
-webkit-appearance: none;
margin: 0;
padding: 0;
border: none;
}
4)iPhone 和 Android 的浏览器纵向 (Portrate mode) 和橫向 (Landscape mode) 模式皆有自动调整字体大小的功能。
控制它的就是 CSS 中的 -webkit-text-size-adjust。
text-size-adjust 设为 none 或者 100% 关闭字体大小自动调整功能.
-webkit-text-size-adjust: 100%;
5) 兼容的字体：
font-family: Helvetica;
6、移动端基本事件：
touchstart 手指触摸 == mousedown
touchend 手指抬起 == mouseup
touchmove 手指移动 == mousmove
1）touch事件 在 chrome的模拟器下，部分版本 通过on的方式来添加事件无效
var box = document.querySelector(".box");
box.ontouchstart = function () {
this.style.background = "blue";
};
解决方法：addEventListener("事件名",函数,冒泡或捕获);
不会存在前后覆盖问题
在chrome的模拟器下可以一直识别
box.addEventListener(
"touchstart",
function() {
console.log(2);
}
);
box.addEventListener(
"touchstart",
fn
);
function fn() {
console.log(3);
}
2）
冒泡 ：点击元素 他会把这个事件一直向上传递 从下向上传递
捕获 ：从上向下传递
var box = document.querySelector(".box");
box.addEventListener(
"touchstart",
function(ev) {
console.log(ev);
},
false
);
3）阻止页面上的文字选中和系统菜单
document.addEventListener(
"touchstart",
function(e) {
e.preventDefault();
}
);
/*
e.preventDefault(); 阻止默认事件
阻止掉：document touchstart的默认事件，可以解决一下问题：
1. 阻止页面上的文字被选中 -- 可以通过阻止冒泡使某个元素上的文字被选中
2. 阻止页面上的系统菜单
隐患:
页面上的所有滚动条失效
*/
window.onload = function () {
var box = document.querySelector(".box");
var div = document.querySelector(".div")
div.addEventListener( //div中的文字可以被选中
"touchstart",
function(e) {
e.stopPropagation();
},
false
);
/*
事件函数中 默认的第一个 参数 是 event对象
*/
};
4）阻止系统默认的下拉回弹效果
阻止 document的 touchstart 或者 touchmove，可以清除系统默认的回弹
document.addEventListener(
"touchmove",
function(e) {
e.preventDefault();
}
document.addEventListener(
"touchmove",
function(e) {
e.preventDefault();
}
);
window.onload = function () {
var div = document.querySelector("#div");
/*
PC端鼠标事件 在移动端也可以正常使用，但是注意 事件的执行 会有300ms的延迟
事件点透：
1. 在移动端 PC事件(click,mouse..) 有 300ms的延迟
2. 我们点击了页面之后，浏览器会记录点击下去的坐标
3. 300ms后，在该坐标找到现在在这的元素 执行事件
解决办法：
1. 阻止默认事件 (部分安卓机型不支持)
2. 不在移动端使用鼠标事件，不用a标签做页面跳转
*/
div.addEventListener(
"touchend",
function (e) {
e.preventDefault();
this.style.display = "none";
}
);
};
</script>
6）防止手指误触点击a链接、也是解决事件点透的方法
document.addEventListener(
"touchstart",
function(e) {
e.preventDefault();
}
);
window.onload = function () {
var a = document.querySelectorAll("a");
for(var i = 0; i < a.length; i++) {
a[i].addEventListener(
"touchmove",
function() {
//在进行touchmove事件的时候设置自定义事件isMove为true
this.isMove = true;
}
);
a[i].addEventListener(
"touchend",
function() {
//当不在进行touchmove事件的时候
if(!this.isMove) {
window.location.href = this.href;
}
this.isMove = false;
}
);
}
};
7、touches、targetTouches、changedTouches
touches 当前屏幕上的手指列表 （一个手指数组长度为1）
targetTouches 当前元素上的手指列表
changedTouches 触发当前事件的手指列表（离开时触发）
获取手指所触发事件时的坐标：
var box = document.querySelector("#box");
box.addEventListener(
"touchmove",
function (e){
var touch = e.changedTouches[0];
this.innerHTML = touch.pageX +"|"+ touch.pageY;
}
);
8、滑屏操作：
<style>
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
position: relative;
overflow: hidden;
}
#wrap {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#scroll {
position: absolute;
left: 0;
top: 0;
width: 100%;
background: #ccc;
}
</style>
<script>
/*
1.手指按下去的时候，记录下手指坐标
2.移动的时候，记录手指坐标
3.用移动后的坐标 - 移动前的坐标 = 手指 移动的距离
4.手指按下去的时候，记录下元素的位置
5.移动之后，元素的初始位置+用手指移动的距离 = 元素现在所要在的位置
*/
window.onload = function () {
var wrap = document.querySelector("#wrap");
var scroll = document.querySelector("#scroll");
var startPoint = 0;
var startEl = 0;
//外面盒子的可视高度减去里面盒子的原本高度
var maxTop = wrap.clientHeight - scroll.offsetHeight;
//console.log(maxTop); maxTop是个负值
wrap.addEventListener(
"touchstart",
function(e) {
var touch = e.changedTouches[0];
startPoint = touch.pageY;
startEl = scroll.offsetTop;//元素的初始位置
}
);
wrap.addEventListener(
"touchmove",
function(e) {
var touch = e.changedTouches[0];
var nowPoint = touch.pageY;
var dis = nowPoint - startPoint;
var top = startEl + dis;
if(top > 0) {
top = 0;
}
if(top < maxTop) {
top = maxTop;
}
scroll.style.top = top +"px";
}
);
};
</script>
</head>
<body>
<div id="wrap">
<div id="scroll">
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦 <br>
</div>
</div>
</body>
</html>
移动端笔记
标签：put console points 基本 fse span 自动 高度 move
原文地址：http://www.cnblogs.com/hello-web/p/7221430.html
