个人电脑、平板电脑、iPhone、iPad、纵向和横向文本问题

Question

我正在尝试为 CSS 中的字体大小创建或查找 "rule of thumb" 标准。我遇到的问题是，在不同的设备上，不同的分辨率下，我发现某些字体大小可以正常工作，但后来我发现在竖屏时出现问题。

我已经开始使用 rem 来计算我的字体大小，并且我创建了这样的混合：

@mixin font-size($sizeValue: 2.4) {
    font-size: ($sizeValue * 10) + px;
    font-size: $sizeValue + rem;
}

@mixin small-size() {
    @include font-size(1.8);

    @include small-width {
        @include font-size(1.8);
    }

    @include large-width {
        @include font-size(1.8);
    }
}

我的想法是，根据设备的分辨率，我可以减小字体大小。但我发现使用 2.4 rem 实际上在所有 PC 和笔记本电脑上看起来都不错。大多数横向平板电脑也很好，但对于任何纵向平板电脑，字体都太小了。

我希望有人创建了某种规则或 CSS 媒体查询，允许您设置基本字体大小，并且它将使用所有设备的媒体查询调整大小，但这可能是一厢情愿:D

那么，有人对此有解决方案吗？或者知道我可以做些什么来简化这件事？

Answer 1

经过大量工作，我发现任何使用 Retina 显示器或类似显示器的东西都需要以不同于标准的方式处理所有内容（边距、填充、宽度、高度、字体大小等）。由于视网膜的性质，修复起来非常简单（尽管很单调）。因为我使用的是 Sass（和 bootstrap），所以我只是像这样创建了一个混合负载：

@import "../../global/variables";
@import "structure";

@mixin make-font($size) {
    font-size: 1 * $size;

    @include iphone-portrait {
        font-size: 2 * $size;
    }
}

@mixin header-font {
    @include make-font($h1);
}
@mixin lead-font {
    @include make-font($lead);
}
@mixin default-font {
    @include make-font($p);
}
@mixin small-font {
    @include make-font($small);
}
@mixin font-size($size) {
    @include make-font($size);
}

如您所见，当我制作字体时，我会以不同的方式处理 iphone（我将大小加倍）。 iphone-portrait 的 mixin 我从 http://stephen.io/mediaqueries/ 得到并为我改编，所以它看起来像这样：

@mixin iphone-portrait {
    @media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) {
        @content;
    }

    @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
        @content;
    }

    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {
        @content;
    }
}

我也可以继续添加媒体查询，这样应该会更容易。现在这仅适用于字体。对于其他事情，我创建了类似的 mixins。例如，对于我创建的导航栏 sass:

.navbar-default {
    @include make-navbar;
    @include lead-font;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: $white-sky;
    color: $midnight-blue;
    margin: 0;
    border: 0;
    z-index: 1;
    box-shadow: none;
    border-radius: 0;

    @include iphone-portrait {
        @include make-navbar(2);
    }
}

导航栏的混合看起来像这样：

@mixin make-navbar($multiplyer: 1) {
    height: $multiplyer * $header-height;
    min-height: $multiplyer * $header-height;

    .navbar-brand {
        margin: 0 $multiplyer * $navbar-brand-margin-left;
        padding: $multiplyer * $navbar-brand-padding;
        height: $multiplyer * $header-height;

        > img {
            max-height: $multiplyer * ($header-height - (2 * $navbar-brand-padding));
        }
    }

    .navbar-header {
        max-height: $multiplyer * $header-height;

        .btn-link {
            margin: 0;
            max-height: $multiplyer * $header-height;
            padding-left: $multiplyer * $button-left-padding;

            .icon {
                margin-top: -$multiplyer * (2 * $button-top-padding);
                height: $multiplyer * ($header-height - (2 * $button-top-padding));

                > svg {
                    height: $multiplyer * ($header-height - (2 * $button-top-padding));
                    width: $multiplyer * ($header-height - (2 * $button-top-padding));
                }
            }
        }


        .navbar-toggle {
            padding: ($multiplyer * $navbar-toggle-padding-top) ($multiplyer * $navbar-toggle-padding-left);

            .fa {
                font-size: $multiplyer * 14px;
            }
        }
    }

    .navbar-nav {
        margin: ($multiplyer * $navbar-nav-toggle-margin-top) auto ($multiplyer * $navbar-nav-toggle-margin-bottom);

        > li > a {
            padding: ($multiplyer * $navbar-nav-list-item-padding-top) ($multiplyer * $navbar-nav-list-item-padding-left);
            line-height: $multiplyer * $navbar-nav-list-item-line-height;
        }

        .open .dropdown-menu > li > a {
            padding: ($multiplyer * $navbar-nav-dropdown-list-item-padding-top) ($multiplyer * $navbar-nav-dropdown-list-item-padding-right) ($multiplyer * $navbar-nav-dropdown-list-item-padding-bottom) ($multiplyer * $navbar-nav-dropdown-list-item-padding-left);
        }
    }
}

@mixin navbar-sub-height($height, $multiplyer: 1) {
    max-height: calc(100vh - #{ $multiplyer * $height });
    max-height: -o-calc(100vh - #{ $multiplyer * $height }); /* opera */
    max-height: -webkit-calc(100vh - #{ $multiplyer * $height }); /* google, safari */
    max-height: -moz-calc(100vh - #{ $multiplyer * $height }); /* firefox */
}

如你所见，我使用 $multiplyer，默认为 1。所以当我调用 mixin @include make-navbar 它使用正常大小，但是对于 iphone 媒体查询，我像这样传递 2：

$include make-navbar(2)

这一切都加倍了。

我已经测试过了，效果很好。显然，通过这种方法，我可以随心所欲地使用 mixin（这样我就可以传递 1.2 或 $multiplyer 的任何值）。

我希望这可以帮助其他有类似问题的人。

个人电脑、平板电脑、iPhone、iPad、纵向和横向文本问题

PC's, Tablets, IPhones, IPads, Portrait and Landscape text issues

css

iphone

android

ipad