屏幕尺寸、屏幕分辨率、屏幕像素密度（出场就设定好的）
屏幕尺寸：
指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。
常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等。
屏幕分辨率：（iphone6 750*1334）
指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素来表示一个手机的分辨率，
如1960*1080。（这里的1像素指的是物理设备的1个像素点）
屏幕像素密度/像素密度/屏幕密度：
屏幕上每英寸可以显示的像素点的数量，单位是ppi，即“pixels per inch”的缩写。
屏幕像素密度与屏幕尺寸和屏幕分辨率有关
物理像素,CSS像素
设备像素/物理像素：（分辨率）出场就设定好的
买手机的时候会有一个 n x m 的分辨率，那是屏幕的n x m个呈像的点，
一个点（小方格）为一个物理像素。
它是屏幕能显示的最小粒度.
设备像素也被称为物理像素,他是显示设备中一个最微小的物理部件。
每个像素可以根据操作系统设置自己的颜色和亮度。
任何设备的物理像素的数量都是固定的
CSS像素：
CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确的度量（确定）Web页面上的内容。
它是为web开发者创造的，在css或者javascript中使用的一个抽象的层
一般情况下，CSS像素被称为与设备无关的像素（device-independent像素），简称为“DIPs”。
在一个标准的显示密度下(普通屏)，一个CSS像素对应着一个设备像素。
设备独立像素:设备独立像素/独立设备像素/独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，
这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，
然后由相关系统转换为物理像素。
设备独立像素，相当于移动端的css像素
位图像素：一个位图的像素是栅格图像(如：png, jpg, gif等)最小的数据单元
1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示（不是则会失真）
对于web开发者而言：
我们使用的每一个css和javascript定义的像素本质上代表的都是css像素，我们在开发过程中
并不在意一个css像素到底跨越了多少个设备像素。我们将这个依赖于屏幕特性和用户缩放程度的
复杂计算交给了浏览器。
像素比（出场就设定好的）
像素比:它的官方的定义为：设备物理像素和设备独立像素的比例，（单位为dpr）
也就是 devicePixelRatio = 物理像素 /设备独立像素
window.devicePixelRatio
视口和浏览器窗口
在pc端：
普通的桌面，视口的默认宽度和浏览器视口的宽度一致
内容区：（不包括滚动条）
document.documentElement.clientWidth
内部区域：（包括滚动条）
window.innerWidth
整个浏览器窗口：（包含外边框）
window.outerWidth
屏幕的宽度：（兼容性不好）
screen.width
在移动端：
布局视口（layout viewport）：6
一般默认为980px（css像素的宽度）
1. 手机上，为了容纳为桌面浏览器设计的网站，默认的布局视口的宽度远大于屏幕的宽度
2. 布局视口相当于承载浏览器网页的容器
3. 可以通过document.documentElement.clientWidth来获取
在pc端，单独一个width为20%的元素最终拿到的值要根据初始包含块的width来决定，因为我们横向的布局都是
按初始包含块开始填的，在移动端一样，不过我们这个时候应该叫它布局视口。
可视视口（visual viewport）：
1. 视觉视口与设备屏幕一样宽，并且它的css像素的数量会随用户的缩放而改变
2. 宽度可以通过window.innerWidth 来获取，
（但在Android 2, Oprea mini 和 UC 8中无法正确获取移动端浏览器厂商要实现的目标：
在小屏幕的移动设备上，尽可能的缩小网站来让用户看到网站的全貌）
理想视口：
<meta name="viewport" content="width=device-width, initial-scale=1">
width为布局视口的宽度，device-width为设备独立像素的宽度
width也可以设置为固定数值，但大部分andiord手机不支持，IOS支持；
设置meta标签后，布局视口 = 可视视口 = 理想视口
未设置meta标签时，元素的大小在不同屏幕上比例是一定的，设置meta标签后元素占的设备独立像素的值一定，当大小数是按比例的
meta
<meta name="viewport" content="width=device-width" />
width [pixel_value | device-width] width
-- 直接去设置具体数值大部分的安卓手机是不支持的 但是IOS支持
1. 在桌面浏览器中,最干净的那个视口就是约束你的css布局的视口,它决定了用户能看到什么
2. 在移动设备上,视口被分为了两个:布局视口限制了你的css布局,视觉视口会决定用户能看到什么
3. 在移动设备上,还有一个理想视口,它是对于特定设备上特定浏览器的布局视口的一个理想尺寸
4. 可以把布局视口的尺寸设置为理想视口,本质上,这就是移动端设计的基础
缩放
用户放大或者系统放大时 视觉视口所包含的css像素的个数变少
用户缩小或者系统缩小时 视觉视口所包含的css像素的个数变多
（物理像素的大小不变，变大或变小的是css像素）
缩放不会影响布局视口的尺寸大小，只不过面积发生变化
在PC端：
块元素： 1. 元素大小不变 （只是呈现的面积变大了）
2. 视口变小了（即，html变小了）
内联元素： 1. 大小随字体变化
2. 视口变小
在移动端：
1. 元素大小不变（无论块或内联）
2. 视口大小不变
事件
两种绑定方式
(DOM0)1.obj.onclick = fn;
(DOM2)2.
ie:obj.attachEvent(事件名称，事件函数);
1.没有捕获(非标准的ie 标准的ie底下有 ie6到10)
2.事件名称有on
3.事件函数执行的顺序：标准ie-》正序 非标准ie-》倒序
4.this指向window
其他:obj.addEventListener(事件名称，事件函数，是否捕获);
1.有捕获
2.事件名称没有on
3.事件执行的顺序是正序
4.this指触发该事件的对象
5.是否捕获 : 默认是false false:冒泡 true：捕获
避免兼容问题：
function bind(obj, evname, fn) {
if (obj.addEventListener) {//除ie低版本外都可以进入
obj.addEventListener(evname, fn, false);
} else {
obj.attachEvent('on' + evname, function() {
fn.call(obj);
});
}
}
两种绑定方式的区别
取消冒泡的手段:event.cancelBubble = true;
event.stopPropagation();
Dom0:1. 默认冒泡,
2. 一个元素上只能绑定一个同类事件,如果继续绑定的话,第二个事件函数会覆盖第一个
Dom2: （移动端推荐使用）
1. attachEvent 默认冒泡
addEventListener
是否捕获 : 默认是false
第三个参数: false:冒泡 true：捕获
2. 一个元素上可以绑定多个同类事件,它们都会被执行
事件解绑
DOM0:想解除事件就相当简单了，只需要再注册一次事件，把值设成null
原理就是最后注册的事件要覆盖之前的，最后一次注册事件设置成null，
也就解除了事件绑定。
DOM0事件模型还涉及到直接写在html中的事件:
因此不会传入event对象，同时，this指向的是window，不再是触发事件的dom对象。
DOM2:removeEventListener
解除事件语法：btn.removeEventListener("事件名称", "事件回调", "捕获/冒泡");
detachEvent(ie)
移动端事件
(DOM0)1.obj.onclick = fn;
(DOM2)2.
ie:obj.attachEvent(事件名称，事件函数);
标准:obj.addEventListener(事件名称，事件函数，是否捕获);
ontouchstart 手指触摸 ==== onmousedown
ontouchmove 手指移动 ==== onmousemove
ontouchend 手指抬起 ==== onmouseup
dom0在移动端不推荐：
在模拟器中不生效，只能在真机上测试，开发不方便
dom2在移动端：
在模拟器中也生效，且不会覆盖
取消系统默认行为
event.preventDefault();
为什么取消系统默认行为
当我们手指触发屏幕时，touchstart，但是页面并没有发生跳转
这时候，我们需要取消系统默认行为
根据我们需求再去添加效果
扫一扫
2312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
