阅读 2999
为什么移动端不能像pc网站一样写

为什么移动端不能像pc网站一样写

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」  ,赢取创作大礼包,挑战创作激励金

引言

首先考虑一个问题 为什么移动端为什么不能像pc网站一样写

我们来看一下,我们正常的电脑网站,放到手机上会如何

2345头条:

image.png

缺点:

  1. 屏幕小,字太小,看起来非常的不方便
  2. 内容比较小,手指不容易精确点击目标
  3. 屏幕小,内容排版显得非常的拥挤

而且,当我们选中元素的时候,会惊奇的发现,元素看着很小,但是宽高挺大的,特别和移动端网站对比,就会发现,很奇怪的一个事情

image.png

image.png

这里的 48 * 48 比 150 * 60大很多这是怎们回事? 想要了解清楚?我们先来学习一个关于单位的知识点。

物理像素

英寸

一般我们都用英寸来描述设备的物理尺寸,例如电脑:17英寸、13英寸,手机:6.5英寸、4英寸。

image.png

注:上面的尺寸都是屏幕对角线的长度,例如我们说一个手机 6.5英寸屏幕,其实指的就是对角线的距离。

1英寸 = 2.54 厘米

分辨率

  • 屏幕分辨率屏幕具体由多少个像素组成,并不是分辨率高,就说明屏幕清晰的,这个还需要考虑尺寸问题。

  • 像素一个小正方形的方块,每一个像素都具备 颜色特定的位置。我们平时看到的 图片、电脑屏幕这些就是由像素组成的,所以当我们修改分辨率的时候,屏幕会发生变化。

以图片为例

image.png

左边的这个图用 1000 * 500像素点制作,右边的用 10000 * 5000的像素制作,从直观的视觉上面,我们就可以看出,右侧的图片更加清晰,是因为它用了更多的像素点,去处理颜色。

像素并不是个绝对单位

像素和我们使用的 厘米、毫米不一样,它并不是个绝对单位,我们可以看下,下面的表格

索尼(SONY)Xperia 10/Plus华为荣耀8X
屏幕尺寸(英寸)6.56.5
分辨率2560 * 14402340 * 1080
像素点数量2,918,4002,527,200

在同样的屏幕尺寸下,索尼放的像素点 比 华为 的更多

索尼:item.jd.hk/49980024227…

华为:item.jd.com/8735304.htm…

而且,像我们电脑大部份分辨率为: 1920 * 1080(手机屏幕可比电脑小多啦)。

image.png

在相同大小的位置里面,我在第一个中,放个 9个像素点,后面的放了36个像素点

  • 像素点和清晰度的关系(PPI)

    如果说像素点越多,屏幕显示越清晰,这句话其实是不够准确的,因为在这里,我们还要考虑屏幕尺寸。

PPI

每英寸包含的像素点。根据这个可以判断出,哪个屏幕清晰度更高,以我们上面的数据为例:

image.png

根据公式:计算item.jd.com/8735304.htm… 华为手机ppi

​ 最终结果:396.49

比较哪个屏幕更加清晰的时候,要根据 PPI 来进行对比。

上面我们描述的这个像素,我们称为物理像素,即设备真实存在的物理单元,时代发展的迅速,给我们的生活带来了很大的影响,手机方面尤其明显。

image.png

旧款的手机,我们可以很明显的看到粗糙的像素点。无论是文字的显示,还是图标的显示,看起来都不圆润

下面我们做一个假设:

image.png

左侧的为低分辨率手机 320 * 480

右侧的为高分辨率手机640 * 960

右侧的两个像素点的大小 = 左侧的一个像素点的大小

由于大家设定的像素点都一样,所以这里,分辨率高的屏幕上,看上去会更小。

这就是为什么同样大小的元素,在PC下 和 移动端下,显示的有差别的原因,因为移动端下的像素点,比pc下的像素点要更小

那为什么同样都是移动端70 * 78看着比110 * 26还要大呢??

那就要从厉害的乔布斯说起啦~

未完待续

点赞支持、手留余香、与有荣焉,动动你发财的小手哟,感谢各位大佬能留下您的足迹。

11.png

往期精彩推荐

前端常用的几种加密方法

canvas 爬坑路【方法篇】

不懂 seo 优化?一篇文章帮你了解如何去做 seo 优化

canvas 爬坑路【属性篇】

【实战篇】微信小程序开发指南和优化实践

聊一聊移动端适配

前端性能优化实战

聊聊让人头疼的正则表达式

获取文件blob流地址实现下载功能

Vue 虚拟 DOM 搞不懂?这篇文章帮你彻底搞定虚拟 DOM

Git 相关推荐

通俗易懂的 Git 入门

git 实现自动推送

面试相关推荐

前端万字面经——基础篇

前端万字面积——进阶篇

更多精彩详见:个人主页

文章分类
前端
文章标签