html640设计稿,移动设备分辨率(终于弄懂了为什么移动端设计稿总是640px和750px)...

article/2025/9/29 3:27:39

在我开始写移动端页面至今,一直有2个疑问困扰着我,我只知道结果但不知道为什么

问题1:为什么设计师给的设计稿总是640px或750px(现在一般以Phone6为基准,给的750px)

问题2:为什么我们拿到640px和750px的设计稿,在编码的时候都要除以2,(比如设计稿上有一个图标宽高是40*40,我们需要先除以2,实际编码时候宽高要写成20*20)

之前也在网上搜过一些相关的文章,但无奈大多说的比较晦涩难懂,要嘛就是太过于深奥。也可能是我脑子不够用吧。

不过要完全理解,确实也需要相关很多的知识储备。个人觉得没必要那么深入理解,下面这张图看懂以后,至少上面2个问题就迎刃而解了,基本也就够了

52b9094196097c1fe9d3a4d7703af9a0.png

这张图最关键的地方就是理解pt和px是什么,以及它们之间的关系

pt:逻辑像素或逻辑分辨率

相当于我们用浏览器模拟调试移动端时看到的各手机的像素,如下图iPhone6看到的宽高375*667,

这个就是逻辑像素,也可以看做是一个长度单位

84f29f88a41b0d3f152f60edefcef7a6.png

px:物理像素或物理分辨率,又被称为设备像素

下图的750*1334就是物理像素,它不能看做是一个长度单位,可以看做是一个点,即像素点

019f0c1b245983a58f6eadb207a1c51f.png

结论:pt和px的关系就是—— 1pt 里面有几个 像素点,下图的Reader就是反应它们之间的比例,即 pt 和 px为1:2

还是拿iPhone6举例,下图 pt 宽高是375*667,px 宽高是750*1334,px的宽高是pt的2倍,[email protected],也就是2倍

所以为什么设计稿640px和750px要除以2,就是因为设计师给的640px和750px是物理像素

而我们在浏览器模拟调试移动端的时候看到的像素是逻辑像素

52b9094196097c1fe9d3a4d7703af9a0.png

因为本人能力有限,可能说得不太清楚,下面的这篇文章说的还可以,有兴趣的小伙伴可以看看

注:差点忘了还有一个问题没有说(23333)就是大家看到下图iPhone6/6sPlus pt和px的比例是1:3

可能会有这样一个疑问,1pt里面像素点越多肯定越清晰,那为什么没有看到设计师给1242px的设计稿呢?

听一个大神说是因为人用肉眼睛能分辨出的最大分辨率就是

所以会发现iPhone6/6sPlus(@3x) 并没有比iPhone6/6s (@2x)更清晰,相当于是一样的。

8e5946cc1a6bb394a8d88cbfef5cf8bd.png

原文:https://www.cnblogs.com/tu-0718/p/9596894.html


http://chatgpt.dhexx.cn/article/6RhOQIvN.shtml

相关文章

1px像素问题

为什么会存在1px问题?怎么解决? - 掘金 作为前端,你应该了解的分辨率/逻辑像素/物理像素/retina屏知识🧐 - 掘金 解决移动端1px边框问题的几种方法 - AhuntSun - 博客园 1、分辨率 分辨率x像素(水平) * …

px和分辨率的关系总结

在相同的屏幕宽高下:如:15.6英寸(396.24毫米)的笔记本电脑: 每单位1920*xxx的分辨率1366*xxx的分辨率一毫米1920/396.244.8个px1366/396.243.4个px 高分辨率意味着大约每一毫米5像素点,像素点越多&#x…

uni-app之响应式单位upx和rpx

一、upx uni-app 使用 upx 作为默认尺寸单位, upx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。 uni-app 规定屏幕基准宽度750upx。 开发者可以通过设计稿基准宽度计算页面元素 upx 值,设计稿 1px 与框架样式 1upx 转换公式如下&…

HTML5 实现本地图片裁剪

HTML5 实现本地图片裁剪 文章目录 HTML5 实现本地图片裁剪1.知识点1.HTML 结构与 CSS 样式2.初始化3 实现 handleFiles,获取文件,读取文件并生成 url4.实现 paintImage 方法5 实现 cutImage 方法6 编写 drag 方法7 保存截图8 js部分 代码 这次小的案例是…

css像素px,物理像素(pt),设备像素比(dpr),1px边框问题,viewport自适应

关于 css像素px,物理像素(pt),设备像素比(dpr),1px边框问题,viewport自适应等问题。 目录 **关于 css像素px,物理像素(pt),设备像素比…

html怎么设置页面最小像素,html px像素单位

html长度尺寸单位px像素 设置字体大小以像素单位 笼统设置装备摆设宽度width、高度height、border边框等花式数字单位px。 一、px引见 px是html长度单元像素。譬如咱们电脑、手机显示屏均使用因而像素为单元,也即是px为单位。透露表现屏区分率1200*800其实便是指120…

【CSS】物理像素 DP(device pixels)、物理像素比(DPR)、px 逻辑像素(CSS像素)、DPI、PPI 的概念解析 以及1px问题解决方法

物理像素 、物理像素比、物理像素比、px 逻辑像素概念解析 前言一、前提概念1.分辨率与物理尺寸关系目前绝大部分显示器都是基于点阵的同样的分辨率下,每个小点的尺寸仍然是可以大可以小的DPI(点每英寸)PPI(像素每英寸&#xff09…

pixel(css pixel device pixel)resolutioncss pixel(像素和分辨率)

文章目录 pixel&resolution(像素和分辨率)reference像素和分辨率分辨率屏幕像素像素&分辨率示例图像像素小结css 像素 开发中遇到的像素问题使用密度无关像素(android)将 dp 单位转换为像素单位 css pixel & device pixelreferencespx&dpi(device pixel & …

区别css单位px、em、rem

在对页面进行自适应时,查阅相关资料了解到,通常有两种方式将px转换为em或者rem,下面就上述三者之间的联系进行讲解: em与px转换 一般浏览器默认1em16px,通过设置font-size大小来代表如:16px*0.62510px&am…

移动端1px像素问题及解决办法

在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在某些机型上,1px会比较粗,即是较经典的移动端1px像素问题。首选先看一下,pc时代和移动端时代对1px的对比。 …

响应式设计:理解设备像素,CSS像素和屏幕分辨率

概述 屏幕分辨率、设备像素(device-width)和CSS像素(width)这些术语,在很多语境下,是可互换的,但也因此容易在有差异的地方引起混淆,实际上它们是不同的概念。 屏幕分辨率和设备像…

【移动端适配】为什么根元素font-size设置成100px或625%?

rem:是一个相对单位,相对根元素字体大小的单位,再直白点就是相对于html元素字体大小的单位。 优点:这样在计算子元素有关的尺寸时,只要根据html元素字体大小计算就好。不再像使用em时,得来回的找父元素字体…

解决适配375像素宽度667像素高度移动端方法:推荐一款非常好用的px转rem单位的VSCode插件px to rem rpx (cssrem)

px to rem & rpx (cssrem) - Visual Studio MarketplaceExtension for Visual Studio Code - Converts between px and rem & rpx units in VSCodehttps://marketplace.visualstudio.com/items?itemNamecipchk.cssrem 在CSS文件中输入px就会自动计算rem了

移动端布局介绍——css像素/物理像素/设备像素比

我们在网页后台看到的不同手机的分辨率是:css像素,设备的独立像素;见下图的红色框里的东西: 如果我们把这个页面截图下来在属性里看它的分辨率, 如下图所示: 发现这个分辨率其实是css分辨率的二倍&#xf…

CSS 中的像素(px)

CSS 中的像素(px) px 是一个我们经常在开发中使用的一个单元; 它表示在屏幕上展示的最小单元; 但是, 在 CSS 中像素可能和我们想象的不太一样. CSS 中的 px 是逻辑距离还是物理距离 答: 是逻辑距离; 像素(pixel)在浏览器中是一个表示距离的绝对单位(absolute unit); 同时,…

一文搞懂像素(px)、分辨率、CSS长度单位

博主目前在蚂蚁集团-体验技术部,AntV/S2 是博主所在团队的开源项目——多维交叉分析表格,欢迎使用,感谢到 S2 github 仓库点赞 star,有任何关于前端面试、就业、技术问题都可给在文章后留言。 对于做前端的朋友,相信看…

获取浏览器高度

获取浏览器高度 获取浏览器可视区域的高度 $(window).height(); //Cross browser gets the size of Visual area window,Have nothing to do with scroll bars /**** 仅获取可视区域的大小*/ var getInner(function() {// alert(typeof window.innerWidth ! undefined);if (…

js获取浏览器高度和宽度值(多浏览器)

IE中: document.body.clientWidth > BODY对象宽度 document.body.clientHeight > BODY对象高度 document.documentElement.clientWidth > 可见区域宽度 document.documentElement.clientHeight > 可见区域高度 FireFox中: document.bo…

JS 获取浏览器高度和宽度

JS获取浏览器高度和宽度 IE中: document.body.clientWidth > BODY对象宽度 document.body.clientHeight > BODY对象高度 document.documentElement.clientWidth > 可见区域宽度 document.documentElement.clientHeight > 可见区域高度 FireFox中&#x…

javascript获取浏览器宽度和高度

测试浏览器及版本&#xff1a;IE8、FF5、Chrome12 屏幕分辨率&#xff1a;1366 x 768 文档声明&#xff1a;<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ht…