飞机大站与移动端理论
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#view {
width: 320px;
height: 568px;
background: url(img10-17/bg.png);
margin: 0 auto;
}
#fle_me {
width: 34px;
height: 24px;
background: url(img10-17/me.png);
position:absolute;
}
</style>
</head>
<body>
<div id="view"></div>
<script type="text/javascript">
// 1 飞机
//1.1创建飞机
var flyEle = document.createElement('div');
var view = document.getElementById('view');
flyEle.id = "fle_me";
document.body.appendChild(flyEle);
//1.2 飞机跟随鼠标
// 确定事件 鼠标移动事件 文档上
document.onmousemove = function(e) {
//chilentX 鼠标的横轴位置
var flyX = e.clientX;
var flyY = e.clientY;
var xCheck = flyX > view.offsetLeft && flyX < view.offsetLeft + view.offsetWidth - 34;
var yCheck = flyY > view.offsetTop && flyY < view.offsetTop + view.offsetHeight - 24;
if (xCheck && yCheck){
flyEle.style.left = flyX + 'px';
flyEle.style.top = flyY + 'px';
//传递新的属性
flyEle.flag = true;
}
}
//2 子弹
// 2.1创建子弹 有很多属性值 同时也有很多子弹
//创建一个对象 包含多个子弹(top left)
//创建子弹对象 bullet
var objB = {
name:'bullet',
num:1,
arr:[], //['id|top|left'] split | newArr[0]id newArr[1] top newArr[2] left
width:6,
height:14
}
createBullet(objB);
function createBullet(obj) {
//创建对象
setInterval(function() {
if(flyEle.flag) {
var ele = document.createElement('div');
ele.id = obj.name + obj.num;//bullet1
//获取索引
var length = obj.arr.length;//已有的子弹个数
obj.arr[length] = ele.id +'|';
obj.num++;
ele.style.width = obj.width + 'px';
ele.style.height = obj.height + 'px';
ele.style.position = 'absolute';
ele.style.background = 'url(img10-17/b.png)';
// flyEle.style.top 是字符串且带单位 所以要转成int
ele.style.top = parseInt(flyEle.style.top) + 'px';
ele.style.left = parseInt(flyEle.style.left) + 17 + 'px';
//arr ['id1|top|left','id2|top|left']
obj.arr[length] = obj.arr[length] + ele.style.top + '|' + ele.style.left;
document.body.appendChild(ele);
}
},2000)
}
//实现单位时间内 让全部子弹移动
function bulletMove() {
if (flyEle.flag) {
for (var i = 0;i < objB.arr.length; i++) {
//遍历每个字符串id top left
var newArr = objB.arr[i].split('|');
//['id','top','left']
//console.log(newArr);
var eleB = document.getElementById(newArr[0]);
newArr[1] = parseInt(newArr[1]) - 9;
eleB.style.top = newArr[1] + 'px';
//更新状态
objB.arr[i] = newArr[0] + '|' + newArr[1] + '|' + newArr[2];
if (parseInt(eleB.style.top) < 0) {
objB.arr.splice(i,1);
eleB.parentNode.removeChild(eleB);
}
}
}
}
//创建敌机
var objA = {
name:'foe',
num:1,
arry:[],
width:34,
height:24
}
createfoe(objA);
//设置敌机初始化
function createfoe(obj) {
setInterval(function() {
if (flyEle.flag) {
var foe = document.createElement('div');
foe.id = obj.name + obj.num;
var length = obj.arry.length;
obj.arry[length] = foe.id + '|';
obj.num++;
foe.style.width = obj.width + 'px';
foe.style.height = obj.height + 'px';
foe.style.background = 'url(img10-17/foe.png)';
foe.style.position = 'absolute';
var ran = Math.random() * 286;
foe.style.top = 0 + 'px';
foe.style.left = view.offsetLeft + ran + 'px';
obj.arry[length] = obj.arry[length] + foe.style.top + '|' + foe.style.left;
document.body.appendChild(foe);
}
},2000)
}
function foeMove() {
if (flyEle.flag) {
for (var i = 0;i < objA.arry.length; i++) {
//['id','top','left']
var newArr = objA.arry[i].split('|');
var foeB = document.getElementById(newArr[0]);
newArr[1] = parseInt(newArr[1]) + 5;
foeB.style.top = newArr[1] + 'px';
objA.arry[i] = newArr[0] + '|' + newArr[1] + '|' + newArr[2];
if (newArr[1] > view.offsetHeight - 24) {
objA.arry.splice(i,1);
var dele = document.getElementById(newArr[0]);
dele.parentNode.removeChild(dele);
}
}
}
}
setInterval(function() {
bulletMove();
foeMove();
//遍历敌机数组
for (var i = 0; i < objA.arry.length; i++) {
var newArr = objA.arry[i].split('|');
var eleF = document.getElementById(newArr[0]);
var xFS = parseInt(newArr[2]);
var xFE = parseInt(newArr[2]) + 34;
var yFS = parseInt(newArr[1]);
var yFE = parseInt(newArr[1]) + 24;
for (var j = 0; j < objB.arr.length; j++) {
var newArr1 = objB.arr[j].split('|');
var eleB = document.getElementById(newArr1[0]);
var xB = parseInt(newArr1[2]);
var yB = parseInt(newArr1[1]);
var xCheck = xB > xFS && xB < xFE;
var yCheck = yB > yFS && yB < yFE;
if (xCheck && yCheck) {
objA.arry.splice(i, 1);
document.body.removeChild(eleF);
objB.arr.splice(j, 1);
eleB.parentNode.removeChild(eleB);
}
}
}
/* for (var i =0;i < objA.arry.length; i++) {
var newArr = objA.arry[i].split('|');
var eleE = document.getElementById(newArr[0]);
//表示敌机left
var x = parseInt(newArr[2]);
//表示敌机右边
var xr = x + 34;
var y = parseInt(newArr[1]);
var yd = y + 24;
//遍历子弹数组
for (var j = 0;j < objB.arr.length; j++) {
var newArr1 = objB.arr[j].split('|');
var eleB = document.getElementById(newArr[0]);
var xb = parseInt(newArr[2]);
var yb = parseInt(newArr[1]);
var xCheck = xb > x && xb < xr;
var yCheck = yb > y && yb < yd;
if (xCheck && yCheck) {
objA.arry.splice(i,1);
eleE.parentNode.removeChild(eleE);
objB.arr.splice(i,1);
eleB.parentNode.removeChild(eleB);
}
}
}*/
},10)
</script>
</body>
</html>
移动端
移动web开发
基础知识
1.屏幕
移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面 。通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来度量）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cvGe8mlR-1571639360882)(C:\Users\12870\AppData\Roaming\Typora\typora-user-images\1571326690320.png)]
而分辨率则一般用像素来度量 px，表示屏幕水平和垂直方向的像素数，例如1920*1080指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成，如下图所示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V5vqSYDl-1571639360885)(C:\Users\12870\AppData\Roaming\Typora\typora-user-images\1571326889244.png)]
2.长度单位
在Web开发中可以使用px（像素）、em、pt（点）、in（英寸）、cm（厘米）做为长度单位，我们最常用px（像素）做为长度单位。
我们可以将上述的几种长度单位划分成相对长度单位和绝对长度单位。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dPT7SLxh-1571639360887)(C:\Users\12870\AppData\Roaming\Typora\typora-user-images\1571326934032.png)]
如上图所示，iPhone3G/S和iPhone4/S的屏幕尺寸都为3.5英寸（in）但是屏幕分辨率却分别为480320px、960480px，由此我们可以得出英寸是一个绝对长度单位，而像素是一个相对长度单位（像素并没有固定的长度）。
3.像素密度
DPI（Dots Per Inch）是印刷行业中用来表示打印机每英寸可以喷的墨汁点数，计算机显示设备从打印机中借鉴了DPI的概念，由于计算机显示设备中的最小单位不是墨汁点而是像素，所以用PPI（Pixels Per
Inch）值来表示屏幕每英寸的像素数量，我们将PPI、DPI都称为像素密度，但PPI应用更广泛，DPI在Android设备比较常见。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p8U4gygk-1571639360892)(C:\Users\12870\AppData\Roaming\Typora\typora-user-images\1571326978586.png)]
Retina即视网膜屏幕，苹果注册的命名方式，意指具有较高PPI（大于320）的屏幕。
思考：在屏幕尺寸（英寸）固定时，PPI和像素大小的关系？
结论：屏幕尺寸固定时，当PPI 越大，像素的实际大小就会越小，画面越精细，当PPI越小，像素实际大小就越大。
4.设备独立像素
随着技术发展，设备不断更新，出现了不同PPI的屏幕共存的状态（如iPhone3G/S为163PPI，iPhone4/S为326PPI），像素不再是统一的度量单位，这会造成同样尺寸的图像在不同PPI设备上的显示大小不一样。
如下图，假设你设计了一个163163的蓝色方块，在PPI为163的屏幕上，那这个方块看起来正好就是11寸大小，在PPI为326的屏幕上，这个方块看起来就只有0.5*0.5寸大小了。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qhnfSPez-1571639360893)(C:\Users\12870\AppData\Roaming\Typora\typora-user-images\1571327028359.png)]
做为用户是不会关心这些细节的，他们只是希望在不同PPI的设备上看到的图像内容差不多大小，所以这时我们需要一个新的单位，这个新的单位能够保证图像内容在不同的PPI设备看上去大小应该差不多，这就是独立像素，在IOS设备上叫PT(Point)，Android设备上叫DIP(Device independent Pixel)或DP。
举例说明就是iPhone 3G（PPI为163）1dp = 1px，iPhone 4（PPI为326）1dp = 2px。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oYwFriu6-1571639360896)(C:\Users\12870\AppData\Roaming\Typora\typora-user-images\1571327067741.png)]
我们也不难发现，如果想要iPhone 3G/S和iPhone 4/S图像内容显示一致，可以把iPhone 4/S的尺寸放大一倍（它们是一个2倍(@2x)的关系），即在iPhone3G/S的上尺寸为4444px，在iPhone4/S上为8888px，我们要想实现这样的结果可以设置4444dp，这时在iPhone3G/S上代表4444px，在iPhone4/S上代表88*88px，最终用可以看到的图像差不多大小。
通过上面例子我们不难发现dp同px是有一个对应（比例）关系的，这个对应（比例）关系是操作系统确定并处理，目的是确保不同PPI屏幕所能显示的图像大小是一致的，通过window.devicePixelRatio可以获得该比例值。
<head>
<meta charset="UTF-8">
<title>获取独立像素与物理像素比例值</title>
</head>
<body>
<script>
// 像素和设备独立像素的一个关系
alert(window.devicePixelRatio);
从上图我们得知dp（或pt）和px并不总是绝对的倍数关系（并不总能保证能够整除），而是window.devicePixelRatio ~= 物理像素/独立像素，然而这其中的细节我们不必关心，因为操作系统会自动帮我们处理好（保证1dp在不同的设备上看上去大小差不多）。
5.像素
1、物理像素指的是屏幕渲染图像的最小单位，属于屏幕的物理属性，不可人为进行改变，其值大小决定了屏幕渲染图像的品质，我们以上所讨论的都指的是物理像素。
// 获取屏幕的物理像素尺寸
window.screen.width;
window.screen.height;
// 以像素计，屏幕的大小
var screenWidth = window.screen.width;
var screenHeight = window.screen.height;
console.log('屏幕的宽度为: ' + screenWidth);
console.log('屏幕的高度为: ' + screenHeight);
2、CSS像素，与设备无关像素，指的是通过CSS进行网页布局时用到的单位，其默认值(PC端)是和物理像素保持一致的（1个单位的CSS像素等于1个单位的物理像素），但是我们可通缩放来改变其大小。
<head>
<meta charset="UTF-8">
<title>CSS像素</title>
<style>
body {
padding: 0;
margin: 0;
background-color: #F7F7F7;
/*height: 1400px;*/
}
.box {
改成自己的像素值
width: 1152px;
height: 120px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
我们需要理解的是物理像素和CSS像素的一个关系，1个物理像素并不总是等于一个CSS像素，通过调整浏览器缩放比例，可以有3种情况。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UWv1J5q8-1571639360901)(C:\Users\12870\AppData\Roaming\Typora\typora-user-images\1571327441696.png)]
扫一扫
890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
