html 移动设备 图片大小,移动设备常识及常用尺寸

随着移动端的发展,我们对于移动端的设计也是越来越多,那么对于移动端的常用设备及它们的尺寸规范我们都了解吗?源码时代老师整理了相关内容,现在就来看看吧!

1.    智能手机的屏幕

1.1英寸(inch),屏幕对角线的长度。3.5英寸是最佳的手持设备尺寸。

1.2像素(pixel),图像的基本单位,并不是小方块或小点,它只是一个抽象概念

1.3分辨率(resolution),图像分辨率和输出分辨率

1.4网点密度和像素密度

1.4.1.网点密度(DPI),即输出分辨率,每英寸打印的点

1.4.2.像素密度(PPI),即图像分辨率,每英寸所含有的像素量

1.4.3.DPI和PPI

Iphone4S将2*2PX当做iphone1\2\3的1个像素来使用,增加了PPI,使图像更加清晰

a979a3dcf88a6e62564c1c13d2c7c5a8.png

1.5逻辑分辨率和像素倍率

1.5.1.物理分辨率是硬件所支持的分辨率(屏幕大小)

1.5.2.逻辑分辨率是软件可以达到的分辨率

1.5.3.逻辑分辨率乘以一个倍率得到我们的物理分辨率,这个倍率叫做像素倍率(@2X\@3X的倍率)

1.6视网膜屏幕(Retina屏幕) :300PPI以上的屏幕

1.7常见手机屏幕规格

1.7.1 热门手机尺寸

iOS             640*1136\750*1334\1242*2208

Android     720*1280\1080*1920

1.7.2 iphone 6/7plus的屏幕

实际像素1080*1920

标准像素1242*2208

放大模式1125*2001,造成屏幕像素无法绝对对齐,因为PPI高,忽略掉了虚边.

1.8 智能手机传感器

1.触屏

2.摄像头

3.GPS,常用于APP定位,地图指引

4.麦克风,支持语音

5.电子罗盘(配合GPS定位)

6.重力传感器(手机屏幕旋转)

7.加速度传感器(摇一摇)

8.光线传感器(自动调节屏幕亮度)

9.距离传感器(手机屏幕靠近脸部时熄灭)

10.气压传感器(健康类和运动型APP,可以测量气压\海拔\心率等)

11.三轴陀螺仪(游戏了APP,感应操作)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 要使用JavaScript让图片移动,您可以使用以下步骤: 1. 首先,在HTML文件中创建一个<img>元素来显示您想要移动的图片,并为其指定一个唯一的id,例如: ```html <img id="myImage" src="path/to/image.jpg" /> ``` 2. 然后,在JavaScript文件中,获取该元素的引用并存储在变量中,例如: ```javascript var image = document.getElementById("myImage"); ``` 3. 接下来,您可以使用CSS样式来设置图片的位置、大小和其他属性,例如: ```css #myImage { position: absolute; left: 0; top: 0; width: 100px; height: 100px; } ``` 4. 然后,您可以使用JavaScript来更改图片的位置。例如,如果您想将图像向右移动50像素,您可以使用以下代码: ```javascript image.style.left = "50px"; ``` 5. 如果您想将图像向下移动50像素,您可以使用以下代码: ```javascript image.style.top = "50px"; ``` 6. 如果您想要在一定的时间内使图像平滑地移动,您可以使用JavaScript的动画函数,例如setInterval()或requestAnimationFrame(),并在每个时间间隔内更新图片的位置。 请注意,在移动图片时,您还需要考虑图片的父容器的位置和大小,以确保图片不会超出其容器的范围。 ### 回答2: JavaScript可以通过改变图片的位置属性来实现图片的移动。首先需要获取要移动的图片的DOM元素,可以通过id或class来获取。然后使用JavaScript的DOM操作方法来改变图片的位置属性,常用的有style.left和style.top属性。通过改变这两个属性的值,可以控制图片在页面中的位置。 具体的实现步骤如下: 1. 首先,在HTML中创建一个图片元素,并设置它的id或class,例如: ```html <img id="myImage" src="image.png"> ``` 2. 在JavaScript中获取该图片的DOM元素: ```javascript var image = document.getElementById("myImage"); ``` 3. 定义一个函数来实现图片的移动,例如向右移动5个像素: ```javascript function moveImage() { var currentPosition = parseInt(image.style.left) || 0; image.style.left = currentPosition + 5 + "px"; } ``` 4. 调用该函数来触发图片的移动,可以通过定时器或事件的方式来触发: ```javascript setInterval(moveImage, 1000); // 每1秒向右移动一次 ``` 上述代码将使得图片每1秒向右移动5个像素,通过不断改变图片的位置属性实现移动效果。根据具体需求,可以修改移动的方向和距离,以及触发移动的方式。 ### 回答3: JavaScript是一种用于网页开发的脚本语言,可以通过操作HTML元素和CSS样式来实现各种交互效果。在JavaScript中,可以使用一些技术来使图片移动。 首先,可以使用DOM操作来获取图片元素,在HTML中给图片元素添加一个id属性,例如: ```html <img src="image.jpg" id="myImage"> ``` 然后在JavaScript中使用getElementById方法获取该图片元素: ```javascript var image = document.getElementById("myImage"); ``` 接下来,可以通过设置元素的样式来实现移动效果。通过修改元素的left和top属性来改变其位置。例如,将图片向右移动100像素: ```javascript image.style.left = "100px"; ``` 可以使用CSS3的transition属性来为图片添加过渡效果,使其平滑移动。例如,添加一个过渡时间为1秒的效果: ```javascript image.style.transition = "all 1s"; ``` 最后,可以使用JavaScript中的事件监听器来触发移动效果。例如,给按钮添加一个点击事件来触发图片向右移动: ```javascript var button = document.getElementById("myButton"); button.addEventListener("click", function() { image.style.left = "100px"; }); ``` 注意,以上代码只实现了图片向右移动的效果,你可以根据需要修改代码来实现其他方向的移动效果,或者组合使用多个移动操作来实现更复杂的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值