当我在 macbook 视网膜上使用 'more space' 显示设置开发我的网站时如何修复尺寸

Question

我在配备视网膜的 macbook pro 上开发了一个网站，我的显示设置缩放到 'more space'。 webapp 这样看起来很棒。

但是当我将显示设置回 'default' 缩放比例时，它看起来很糟糕，所有组件都太大了。

显示缩放如何工作？我最好的猜测是它是设备像素和 CSS 像素之间的不同映射，但其他网站似乎可以更优雅地处理这个问题。我希望我的 webapp 对于具有不同分辨率和显示设置的人来说看起来大致相同。 CSS 是否有任何优雅的方式来处理这个问题？还是手写笔？（我正在使用的 CSS 预处理器）

我目前的计划是手动检查 CSS 并将其中的所有尺寸切成两半。但如果有更好的方法，我宁愿不必经过那里。

Answer 1

您有什么特别的问题？

字体应该不是真正的问题，您应该为您的图标使用 SVG。

唯一真正的灰色区域是图像，但如果您使用 picturefill 之类的东西，目前应该已经足够好了。

此外，我认为您应该 this 读一读。

Answer 2

你可以试试@media.

您可以检查设备像素比并设置不同的图像或样式。
例如，如果你想检查这个设备是否有 x3 比率，你应该这样做：

@media only screen and (-webkit-min-device-pixel-ratio : 3) {
    .style-of-element {
        background: url();
        font-size 24px;
    }
}

如果我们只谈论图像，您可以看到 HTML5 标签 <picture>。 Link
您也可以在那里检查像素比，并根据它放置不同的图像。就像这样：

   <picture> 
        <source srcset="http://big.jpg" media="(min-width: 617px)">
        <source srcset="http://medium.jpg 1.25x, http://big.jpg 1.5x" media="(min-width: 419px)">
        <source srcset="http://medium.jpg 1.5x, http://big.jpg 2x" media="(min-width: 321px)">
        <source srcset="http://medium.jpg 2x, http://big.jpg 3x" media="(min-width: 222px)">
        <img alt="Alt" src="http://default.jpg">
   </picture>

我还知道一个关于 Retina 是什么的很好的介绍，但它是俄语的。也许你会从那里的图片中得到一些理解？ Link

Answer 3

想通了！

事实证明，当您返回未缩放的 "default" 视图设置时，css 像素的数量实际上也减少了（全屏时降至 1100 左右）并增长到 1500 或所以在 "more space" 上全屏显示时。因此，为了不缩放页面，我们需要 CSS 的一个版本，其中每个 px 值对于 "more space" 都是 A，对于 "default"（或多或少）是 A/2。我正在考虑手动执行此操作，但后来意识到我还必须为 bootstrap 执行此操作（通过并将每个 css px 值从 A 更改为 A/2 .这听起来不好玩。

但是后来，Bootstrap4出来了，我才了解到css里面的rem单元。这意味着如果我通过并将每个 px 值更改为其关联的 rem 值，我可以执行以下操作：

@media(min-width: 768px)
    html
        font-size 12px
@media(min-width: 1150px)
    html
        font-size 14px
@media(min-width: 1300px)
    html
        font-size 16px

这正是我所做的。为此，我需要编写一个脚本来遍历缩小的 bootstrap 字符串，并将 px 更改为 rem，基数 html 大小为 16:

import re

def toRem(match):
    return str(float(match.group(0))/16.0)

def main(string):
    splits = string.split('px')
    values = [re.sub('[0-9]+$', toRem, split) for split in splits]
    output = 'rem'.join(values)
    print output

这种方法的唯一问题是一个值：1px 被转换为 0.0625rem，当您降低 html 字体大小时，它太小而无法显示，因此所有 1px 边框都消失了。我通过将每次出现的 0.0625rem 更改为 1px 来修复此问题，因为 1px 应始终为 1px。

现在页面在所有显示分辨率下看起来都很棒，我们甚至保留了 768 像素以下尺寸的移动视图。

当我在 macbook 视网膜上使用 'more space' 显示设置开发我的网站时如何修复尺寸

How to fix sizes when I developed my website with 'more space' display setting on macbook retina

css

macos

stylus

retina-display

retina