问题标签 [pixel-ratio]

请告诉我如何使视网膜设备的画布看起来清晰？如果您在我的示例中展示，我将不胜感激 -小提琴

谷歌说“因为 css 像素比”，但我不知道那是什么，或者它为什么存在。

为什么我要添加元数据来告诉浏览器以 <2/3 的屏幕分辨率呈现屏幕？图像（据我所知）没有调整大小，那为什么其他的都是？为什么这很常见？wts 怎么了？？

I just have to clarify an issue regarding device-pixel-ratio, do I have to use it in my media queries? will it somehow affect them if i don't? I mean, there are many devices using the 360X640 screen resolution, for example:

Samsung Galaxy S6 (360X640 , 4dpr) Sony Xperia Z (360X640 , 3dpr) Samsung Galaxy Note II (360X640 , 2dpr)

So if i just make 2 media queries for portatrait and landscape, like so:

Will it somehow differ from doing this:

Its just that every tutorial or explanation about media queries i found on the web included the device-pixel-ratio in the query, I tried to look for information on the web to see if it is a must, and couldn't find anything.

我的 RN 应用程序（v0.19.0，ios 和 android）需要一个加载/启动屏幕（有时可能会在启动时加载一些数据），所以我试图了解如何为这个屏幕提供正确的图像集设备。

代码是：

据我所知，我需要提供一组具有正确像素比的图像吗？这与各种屏幕尺寸有什么关系？此外，RN 文档只提到 2x 和 3x，但PixelRatio上的文档表明还有 1.5 和 3.5？（而且，文件名中如何表示？是 check@3.5x.png 吗？）我如何考虑纵向和横向？

文档在这个话题上似乎出奇的轻松。

我有一个最初为 iPhone 6 symulator 编写的应用程序，它有一个带有以下示例值的组件：

不幸的是，当我在 iPad 模拟器上启动该应用程序时，尺寸比例完全崩溃了。我知道有类似 PixelRation 的东西，但文档非常有限且不清楚。

任何想法/建议如何使用此 PixelRatio 类将这些宽度/高度/填充和字体大小转换为正确的值？

目前我正在为一个使用 Retina Ready Coding 的网站工作。Retina 显示器（新 iPad）的分辨率为 2048 x 1536 像素，而普通 iPad/Tab 的分辨率为 1024x768 像素。根据 Retina 定律，每当我使用 body width / container width 1536px in

这应该将 width:1536px 自动调整为 768px（作为它的像素比 2）。但它显示将整个站点放大到 iPad。每当我接触 iPad 时，它的宽度从 1536 像素变为 768 像素。有人对此有任何解决方案吗？我在 Retina 显示移动设备上面临同样的问题。

我的主页显示有问题。这是我第一次尝试响应式设计，我想到目前为止还不错。我在这里上传了项目：https ://adventuretrails.000webhostapp.com您应该也可以在那里访问所有必要的资源。

由于这是一个非常早期的版本，因此涉及很多错误，但我希望您专注于这个特定的错误：

如果您调整浏览器窗口的大小，您可以看到样式更改为平板电脑版本，如果您将窗口缩小一点到移动版本。这就是我希望我的主页在每台移动设备上显示的方式。

由于设备具有不同的分辨率，只要移动设备的像素比为 1，它看起来不错，如果像素比为 2（iphone5）看起来还不错，但高于 2 的所有东西都绝对丑陋。

我知道我可以为每个可能的像素比设置 css 样式，但这不是最终的解决方案，对吧？我猜现在最大的习惯设备像素比大约是 4。但几年后还会有更多。

那么有没有办法让浏览器知道，以设备像素比 1 显示我的主页？或者类似的解决方案，它为我节省了为每个像素比率定义 css 样式的弯路？

我有这些媒体查询规则，根据窗口宽度指定一行内应该有多少个缩略图：

它在 1.0 像素比的显示器上运行良好，但在高 dpi 显示器上缩略图显得太大。

经过一番谷歌搜索后，我发现我应该为更高 dpi 显示器添加另一组规则，其中包括(and min-resolution: 1.3dppx)

但这并不能真正解决任何显示器的问题，它只是解决了 1.3 dpi 显示器的问题。

有没有办法调整第一组规则中的最小宽度值，以考虑设备像素比？

我正在寻找类似的东西：

但这显然行不通：/

我正在使用高分辨率屏幕并想检查两者之间的区别

有没有办法打开/关闭高分辨率图像，以便我可以看到高分辨率图像和普通分辨率之间的区别？

假设我将默认字体大小设置为 16px（这应该是多余的，因为它在大多数浏览器中都是默认的）：

为简洁起见，我的网站包含一些大小为 10em x 10em 的盒子。

我的网站已经对min-width针对 em 值（36、62 和 85em）的特定断点的媒体查询做出响应。

我的网站唯一要做的就是改变盒子的宽度和颜色。

现在假设我有一些分辨率为 1440x900 的设备，其中浏览器决定设备的像素密度默认为 2dppx。结果，一切看起来都比应有的大得多。我不喜欢它。

但是解决方案应该很简单，对吧？只需在开始时为 2dppx 像素密度添加一个媒体查询，因为它是像素的两倍，所以我只需将字体大小减少一半......应该可以，对吧？

而且由于我在所有内容上都使用“em”，然后通过将字体大小更改一半，我会自动将所有“em”大小的大小减半……对吗？

相关的jsFiddle

好吧，我发现它不像我想象的那样工作......我试图用谷歌搜索答案，但没有找到任何相关的东西，我怀疑我误解了字体大小、ems 和像素密度的工作原理......

• 将 font-size 减少 50% 会使 font-size 减少一半以上。原始大小为 16px 但 font-size: 50%; 导致字体比 font-size:8px 小得多......在 Firefox 和 Chrome 中测试。有谁知道这是为什么？

• 当我设置 font-size:8px; 在 2dppx 的媒体查询中，min-width:36em、62em 和 85em 的媒体查询不会像我预期的那样触发，至少当我在 Firefox 中更改 layout.css.devPixelsPerPx 时。媒体查询中的 min-width 的行为就像 font-size 仍然为 16px，尽管它随着 dppx 媒体查询而改变。在 Firefox 和 Chrome 中测试。有谁知道这是为什么？

更新

看起来媒体查询是在 1dppx 上下文中加载的，如果您使用“em”并不重要，似乎它们在加载时被缓存，并且诸如 min-width 之类的值固定为第一个值，即使您更改了基本字体大小在不同的媒体查询中，其他查询不会刷新。

我现在能想到的唯一解决方案是将所有媒体查询相乘。一个媒体查询 1 dppx 上下文中的 px 值，另一个媒体查询 2 dppx 上下文中的 px 值（这是第一个值的 50%）。