腾讯云

文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么CSS中的1px与屏幕分辨率中的1px不匹配？

问为什么CSS中的1px与屏幕分辨率中的1px不匹配？
EN

Stack Overflow用户

提问于 2022-01-28 03:37:59

回答 1查看 367关注 0票数 2

如果从开发工具中查看站点的body/html (或任何其他)，可以清楚地看到页面的宽度(x)比屏幕分辨率小15-20%。

差异从何而来?

我理解浏览器本身为什么会有+-50 px的小差异，因为边框/滚动条等等，但我确信它们不会丢失400 px宽。

我还检查我的浏览器设置是否设置为100%缩放。

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-01-28 04:20:26

计算尺寸

现在，有计算大小、夹子或最小/最大定义的情况非常普遍。所以，首先要检查的是这些是否影响了你所期望的数字。

像素密度

现代设备有不同的屏幕密度。基本上，这意味着更多的物理闪烁灯被用来表示一个“理论像素”，这允许超高分辨率渲染。

特别是，实际像素(闪烁的灯)和理论像素的比率，例如iPhone 11 Pro有3倍像素密度，三星Galaxy有4倍像素密度。这是“每个CSS像素有多少个设备像素。

从另一个角度来看，三星上的1440个物理像素代表360 CSS像素。

一个完整的在本文中是可用的。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70893133

复制

在retina屏中实现1px border效果

sass css http iphone ios

街景wap官网中有在视网膜屏幕中实现1px border的需求. 首先，来看下面视觉给的输出图中的border：

IMWeb前端团队

2019/12/03

6150

在retina屏中实现1px border效果

github

根据给定的文章内容，撰写摘要总结。

IMWeb前端团队

2017/12/29

1.1K0

7、reset.css的引入及1px边框问题的解决

其他

因为不同的浏览器默认的样式不同，所以在着手项目开始前，我们需要引入reset.css，将所有html标签的默认样式统一化。我这里推荐一个下载reset.css的网站：https://cssreset.com/，里面还有一些normalize.css之类的，大家有兴趣可以研究。

Ewall

2018/09/04

1.2K0

移动端H5页面中1px边框的解决办法

border ui web开发前端移动端

在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的移动端1px像素问题。简书中描述很好的文章，细节可以点击进去看，如果直接想看代码实现，请看下面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=

我乃小神神

2021/12/07

7190

html 边框变粗 margin -1px

html

本文主要介绍了在HTML和CSS中如何解决边框变粗的问题。首先介绍了一种常见的方法，即使用`list-style: none`属性来移除列表的标记，并使用`border`属性来设置边框的宽度、样式和颜色。然后，本文介绍了一种使用`margin`负值的方法，即通过设置`margin-top`和`margin-left`的值为负数，来实现边框的变粗效果。最后，本文还介绍了一种使用`border-top`和`border-bottom`属性来取消顶部或底部边框的方法，以及一种使用`border-collapse`属性来合并单元格边框的方法。

用户1171305

2017/12/28

3.2K0

浏览器默认样式、1px边框问题、css预编译

vue.js css postcss sass http

参考链接：移动端1px解决方案 vue-cli css相关 normalize.css

Ewall

2020/04/01

4250

网页|css中的匹配问题

css html

众所周知在写css的时候，会根据html中类的定义或者id的定义来写相应的css代码。给不同的类定义不同的样式，当然为了能够少写一些代码，大家就会在css中引用匹配。匹配有模糊匹配和全局匹配。匹配的方式有几种。当然也可以在html中写不同的类名，或者写相同的类名，就能够实现所有的样式的匹配。但有时候类名不能够写到相同，这样就会出现冗余的代码，就会造成代码复杂度的增强。为了减少代码的冗余，就出现了类的匹配。

算法与编程之美

2020/04/23

1.3K0

iOS UICollectionView等分有1px缝隙

ios

在使用UICollectionView开发无缝隙或者间隙为1px的页面的时候应该会遇到这样的问题(iPhone 5s 没有问题)，明明是把屏幕四等分了,但为什么会有下图的空白间隙呢? 等分有缝隙再检

傅_hc

2018/07/04

1.5K1

前端-移动端1px问题的解决办法

css

由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px，所以在高清瓶下看着1px总是感觉变胖了

grain先森

2019/03/29

9920

移动端1px解决方案

css html

在移动端，css中的1px并等于移动设备的1px，因为手机屏幕有不同的像素密度。window中的devicePixelRatio就是反应css中像素与真实像素的比例，也就是设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。所以造成了通过css设置1px，在移动端屏幕上会变粗。

Tiffany_c4df

2019/09/04

1.7K0

iOS去除导航栏和tabbar的1px横线

ios xcode

1.在自己定义的导航栏中或者设计稿中经常需要去除导航栏的1px横线，主要是颜色太不协调了去除之前的图片要去除这1px的横线，首先应该知道它是什么，在Xcode的界面调试中可以看到，它其实是UIIm

傅_hc

2018/06/28

1.7K0

目前解决移动端1px边框最好的方法

css iphone ios

在移动端开发时，经常会遇到在视网膜屏幕中元素边框变粗的问题。本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法。

用户6167509

2020/07/23

1.5K0

h5 1px 细线如何实现

原理

主要原理是使用媒体查询，通过伪元素来实现，针对不同的设备 dpr ，进行不同比例的缩放，

蓓蕾心晴

2022/10/30

3030

移动端1px边框解决方案

java

.border-1px { position: relative; } .border-1px:after { position: absolute; content: ''; top: -50%; bottom: -50%; left: -50%; right: -50%; -webkit-transform: scale(0.5); transform: scale(0.5); border-top: 1px solid #666; } @media (-webk

FinGet

2019/06/28

5730

聊一聊CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别

javascript css device dp window

大家好，我是HoMeTown，顺着计量单位，想继续聊一下CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别。

HoMeTown

2022/10/26

1.4K0

viewport深入理解和使用

css iphone html android ios

viewport是用户网页的可视区域，也可叫做视区。手机浏览器是把页面放在一个虚拟的窗口(viewport)中，通常这个虚拟的窗口比屏幕宽，这样就不用把网页挤到很小的窗口中，用户可以通过平移和缩放来看网页的不同部分。

呆呆

2021/11/25

7120

viewport深入理解和使用

css iphone html android ios

呆呆

2021/09/28

1.3K0

移动前端开发之viewport的深入理解

css html iphone ios android

在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、viewport的概念通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域

前朝楚水

2018/04/02

1.1K0

聊一聊CSS中的长度单位

css 网站

CSS中有很多属性可以接受长度值，比如： width, height, margin, padding, border-width, font-size, text-shadow。因为使用场景多，因此CSS也提供了许多长度单位。有的是日常生活中使用的单位，比如：厘米（cm）和英寸（in）；有的是印刷行业使用的单位，比如：point（pt）和pica（pc）；有的是专门为CSS发明的单位，比如：px。

MudOnTire

2019/05/26

1.1K0

你找到的LUT个数为什么和资源利用率报告中的不匹配

report tcl 统计

以Vivado自带的例子工程wavegen为例，打开布局布线后的DCP，通过执行report_utilization可获得资源利用率报告，如下图所示。其中被消耗的LUT个数为794。

Lauren的FPGA

2019/10/31

4.1K1

相似问题

CSS:为什么1 1px边框呈现为1.111 1px？

CSS粘滞忽略1px

117

.split("1px")到Javascript中的["1px",1，"px"]

511

Phonegap jQuery移动背景CSS问题-屏幕底部的1px

CSS边框小于1px

4264

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

社区富文本编辑器全新改版！诚邀体验～

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

问为什么CSS中的1px与屏幕分辨率中的1px不匹配？
EN