移动端知识点总结(一)

简介: 移动端知识点总结

移动端知识点总结

一、移动端—屏幕

移动设备与PC设备最大的差别在于屏幕,这主要体现在屏幕尺寸和屏幕分辨率两个方面。

通常我们所指的屏幕尺寸,实际上是指屏幕对角线的长度(一般用英寸来度量)如下图所示


二、移动端——分辨率

屏幕的垂直和水平最多放像素的个数


三、移动端——长度单位

在Web开发中可以使用像素、 em、 pt(点)、in(英寸)、cm作为长度单位我们最常用像素作为长度单位 我们可以将上述的几种长度单位划分为相对长度单位和绝对长度单位

英寸是一个绝对长度单位,而像素、 em是一个相对长度单位(像素并没有固定的长度)

四、移动端—像素密度

DPI(Dots Per Inch)是印刷行业中用来表示打印机每英寸可以喷的墨汁点数,由于计算机显示设备中的最小单位不是墨汁点而是像素,PPI (Pixels Per Inch)表示每英寸所拥有的像素数目,数值越高,代表屏幕能以更高的密度显示图像

PPI的值越大说明单位尺寸里所能容纳的像素的数量越多,所能展现画面的品质也就越精细,反之就越粗糙。Retina即视网膜屏幕,苹果注册的命名方式,指具有较高的PPI(大于320)的屏幕

五、移动端—像素

(1)、物理像素(分辨率)是指设备屏幕实际拥有的像素点。比如iPhone6的屏幕在宽度方向有750个像素点,高度方向有1334个像素点,所以iPhone 6总共有750*1334个物理像素。

(2)、设备独立像素是一个抽象的概念 各种设备:手机 平板 笔记本

  • 手机:3XX~4XX(短板)之间
  • 平板:10寸平板7XX~8XX(短板)之间
  • 笔记本:13寸1280(长边)

(3)、像素比dpr是物理像素与设备独立像素之间的比例。当像素比为1:1时,使用1个物理像素显示1个设备独立像素;当像素比为2:1时,使用4个物理像素(长2倍,宽2倍,乘起来就是4倍)显示1个设备独立像素

(4)、CSS像素: CSS中的长度单位,在CSS中使用的px都是指CSS像素。CSS中的1px并不等于设备的1px从iphone4开始,推出了所谓的Retina屏,分辨率提高了一倍,变成640*960. 但屏幕尺寸却没变化, 这就意味着同样大小的屏幕上,像素却多了一倍,这时,1个CSS像素是等于4个物理像素。

六、iPhone各型号物理像素和独立像素

七、移动端—模拟调试

现代主流浏览器均支持移动开发模拟调试,通常按F12可以调起,其使用也比较简单,可以帮我们方便快捷定位问题。

八、移动端—真机调试

模拟调试可以满足大部分的开发调试任务,但是由于移动设备种类繁多,环境也十分复杂,模拟调试容易出现差错,所以真机调试变的非常必要。

有两种方法可以实现真机调试:将做好的网页上传至服务器或者本地搭建服务器,然后移动设备通过网络来访问。


移动端知识点总结(二)https://developer.aliyun.com/article/1384477

相关文章
|
3月前
|
移动开发 编解码 前端开发
【面试题】前端 移动端自适应?
【面试题】前端 移动端自适应?
|
3月前
|
缓存 小程序 前端开发
微信小程序开发知识点
微信小程序开发知识点
187 0
|
12月前
|
小程序 JavaScript 前端开发
微信小程序系列——开发知识点集锦
微信小程序系列——开发知识点集锦
|
1月前
|
前端开发 数据安全/隐私保护
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(一)
|
1月前
|
JavaScript 前端开发 Java
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
前端网页开发学习(HTML+CSS+JS)有这一篇就够!(二)
|
10月前
|
前端开发 JavaScript 数据可视化
分享三个前端游戏开发入门网站
分享三个前端游戏开发入门网站
|
移动开发 编解码 前端开发
移动端H5网页开发必备知识
H5网页开发必备知识
107 0
|
移动开发 小程序 前端开发
前端概念之移动端/小程序
随着智能手机的普及,移动端已经成为了人们最重要的使用场景之一。在这个场景下,前端开发也面临着各种挑战,如不同设备的屏幕尺寸、不同平台的兼容性等。为了解决这些问题,多端/跨端/融合的移动端/小程序的概念应运而生。 多端/跨端/融合 在移动端开发中,我们常常需要考虑到不同平台的适配问题,如iOS、Android等。而多端/跨端/融合的思路就是将这些平台的问题合并在一起,以便更好地解决它们。具体来说,多端/跨端/融合的移动端/小程序是指能够在多个平台上运行的应用程序,如H5、小程序、快应用等。
205 0
|
前端开发
前端知识案例-响应式设计
前端知识案例-响应式设计
63 0
前端知识案例-响应式设计