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的任何值）。

我希望這可以幫助其他有類似問題的人。