PC的，平板电脑，IPhone，iPad的，肖像和风景的文本问题

Question

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

我一直在使用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实际上看起来相当不错。景观中的大多数平板电脑都很好，但对于任何纵向字体来说太小。

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

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

Answer 1

经过大量工作后，我发现任何使用视网膜显示或类似需求的东西都会不同于标准地处理所有内容（边距，填充，宽度，高度，字体大小等）。 由于视网膜的性质，它是非常简单的修复（虽然它是单调的）。因为我用无礼的话（和引导），我只是创造了这样混入的负载：

@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画像我从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; 
    } 
} 

我可以不断加入媒体查询过它，所以应该更容易。 现在，这只适用于字体。对于其他事情，我创建了类似的mixin。例如，对于导航栏我创造了这个青菜：

.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。所以，当我调用混入@include化妆导航栏它使用正常大小，但对于iphone媒体查询我通过2这样的：

$include make-navbar(2) 

而且这一切都是双倍的。

我已经测试过了，它可以很好地工作。很明显，使用这种方法我可以使用mixins（我可以通过1.2或$ multiplyer的任何值）。

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