Question

我正在尝试为CSS中的字体大小创建或找到“经验法则”标准。我遇到的问题是，在不同的设备上，不同的分辨率，我发现一些字体大小工作正常，但后来我在肖像时发现问题。

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

int *ptr1 { new int(15) };
int *ptr2 { ptr1 }; // ptr2 points to same memory address as ptr1

// ... Some cool code goes here

delete ptr1; // Free the memory of ptr1

cout << *ptr2;
// Raises an exception because the address
// has been removed from the effective
// memory of the program.

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

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

那么，有人有解决方案吗？或者知道我能做些什么来使这更容易？

Answer 1

经过大量的工作，我发现任何使用视网膜显示器或类似物品的东西都需要以不同于标准的方式解决所有问题（边距，填充，宽度，高度，字体大小等）。由于视网膜的性质，它很容易修复（尽管它是单调的）。因为我使用Sass（和bootstrap），我只是创建了一堆mixins：

@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（我的尺寸加倍）。我从http://stephen.io/mediaqueries/获得了 iphone-portrait 的混音并适合我，所以它看起来像这样：

@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看起来像这样：

@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)

这会使一切都加倍。

我已经对此进行了测试，效果非常好。很明显，通过这种方法，我可以使用mixins（所以我可以传递1.2或$ multiplyer的任何值）。

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

PC，平板电脑，IPhones，IPads，纵向和横向文本问题

1 个答案: