宽度量取错误

宽度量取错误

使用QQ截图软件,量取的宽度是160px,但实际太宽了,查看盒子模型发现它实际只有74

当前缩放确认是100%

通过缩放网页,发现这个宽度是会变化的,比如缩小至70%左右,这个宽度按就是107px左右。请问,在实际工作中这个宽度也是需要手动量的吗?还是设计同学会给出?还是其他什么方式获取?

另外,powertoys软件资料区没有,请老师上传下吧

spacer.gifhttps://img1.sycdn.imooc.com/climg/673c3dcc0921db4120680944.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学,你好!1、老师这边浏览器设置100%截图取宽度也是一百零几。同学是160px,这种现象通常是由于不同设备的屏幕分辨率、DPI(每英寸点数)、浏览器缩放设置等因素的不同所导致的。以下是可能导致这一现象的一些具体原因:

屏幕分辨率和DPI的不同:不同的设备可能有不同的屏幕分辨率和DPI。高DPI的屏幕在相同物理尺寸下可以显示更多的像素,因此同样的网页内容在不同设备上可能会有不同的显示尺寸。

浏览器缩放设置:虽然您提到浏览器缩放都是100%,但有时候浏览器的实际缩放比例可能因为系统设置或其他原因而有所不同。您可以检查一下浏览器的缩放设置,确保它们确实是相同的。

2、设计会给前端同学一个完整版的图,再将涉及的图片单独切出来给前端,由前端同学自己编写网站,需要的尺寸,前端同自己使用软件测量

3、powertoys软件同学可从百度网盘下载,下载链接如下:

链接:https://pan.baidu.com/s/1DRGlaMy_OrTxtxzCrZaBlg 

提取码:etsf

祝学习愉快~


  • 曲别针010 提问者 #1

    关于第一个问题:通过调整电脑的分辨率和文本缩放,确实能理解到老师说的屏幕分辨率和DPI的问题。

    https://img1.sycdn.imooc.com/climg/673fe76c093b429513370730.jpg

    但我通过调整了几次分辨率,还是无法准确测量前段页面的尺寸,如果实际工作遇到这样的情况,如何解决

    如下是我其中一次调整测量出来的结果(将缩放调整成100%,每次测量前都确认了谷歌浏览器的的缩放是100%,每次调整分辨率):

    https://img1.sycdn.imooc.com/climg/673fe79309620cb810360176.jpg

    https://img1.sycdn.imooc.com/climg/673fe83209cadf3a07320315.jpg


    2024-11-22 10:14:29
  • 曲别针010 提问者 #2

    powertoys软件在微软的应用商店中下载更加方便,已成功安装,谢谢

    2024-11-22 10:25:07
  • 好帮手慕小猿 回复 提问者 曲别针010 #3

    同学,你好!工作中同学是自己编写前端代码的,按照自己电脑的尺寸截取就行的。使用整个页面最大成度相似就可以的。比如不同浏览器显示的尺寸都会有不同的,如edge 浏览器width测量是133px

    https://img1.sycdn.imooc.com/climg/673ffa3009419b7300970042.jpg

    ie是105px

    https://img1.sycdn.imooc.com/climg/673ffa7a098a617600690035.jpg

    不同浏览器之间同一网页显示都是会有些差别的,所以说不会特别准确,同学大概测量宽度,在自己电脑上模仿网页相似就可以,无法做到特别准确。

    若是想特别准确可以审查元素,看每个元素的设置,但也是模仿写,值不会都相同的

    https://img1.sycdn.imooc.com/climg/673ffb9209cd05c912950334.jpg

    祝学习愉快~

    2024-11-22 11:34:42
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师