移动端知识点总结，前端面试题集锦在这里

最新推荐文章于 2024-09-11 22:31:16 发布

高工程序猿

最新推荐文章于 2024-09-11 22:31:16 发布

阅读量300

点赞数 5

分类专栏： 2024年程序员学习文章标签：前端

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/m0_60721695/article/details/137269838

版权

2024年程序员学习专栏收录该内容

278 篇文章 1 订阅

订阅专栏

本文详细探讨了移动端开发的关键要素，如屏幕尺寸、分辨率、像素密度、像素概念（物理像素、设备独立像素和DPR）、调试方法（模拟和真机）以及浏览器特性。还提到了HTML、CSS和JavaScript等内容在移动端开发中的重要性，以及性能优化的相关知识。

摘要由CSDN通过智能技术生成

一、移动端—屏幕

移动设备与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可以调起，其使用也比较简单，可以帮我们方便快捷定位问题。

八、移动端—真机调试

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

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

九、移动端—视口

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

十、移动端—浏览器

在这里插入图片描述

移动端浏览器市场比例

在这里插入图片描述

十一、rem px em的区别

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

基础面试题

CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-Lvz9AqU3-1712040006182)]

基础面试题

CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

高工程序猿

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
移动端知识点总结，前端面试题集锦在这里

一、移动端—屏幕二、移动端——分辨率三、移动端——长度单位四、移动端—像素密度五、移动端—像素手机：3XX~4XX（短板）之间平板：10寸平板7XX~8XX（短板）之间笔记本：13寸1280（长边）六、iPhone各型号物理像素和独立像素七、移动端—模拟调试八、移动端—真机调试九、移动端—视口十、移动端—浏览器十一、rem px em的区别。
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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