最小和最大尺寸的視口大小的版式

以視口單位宣告字型大小會產生非常有趣的結果，但這確實帶來了挑戰。 css中沒有min-font-size或max-font-size屬性，因此難以處理文字過小或過大的情況。

該sass mixin利用**查詢來定義字型的最小和最大大小（以畫素為單位）。 它還支援乙個可選引數，以作為不支援視口單位的瀏覽器的後備。

例如，這是將字型定義為5vw限制在35px和150px之間（對於不支援的瀏覽器，回退為50px）：

@include responsive-font(5vw, 35px, 150px, 50px);

///

/// viewport sized typography with minimum and maximum values
////// @author eduardo boucas (@eduardoboucas)
////// @param    $responsive  - viewport-based size
/// @param    $min         - minimum font size (px)
/// @param    $max         - maximum font size (px)
///                                  (optional)
/// @param    $fallback    - fallback for viewport-
///                                  based units (optional)
////// @example scss - 5vw font size (with 50px fallback), 
///                 minumum of 35px and maximum of 150px
///  @include responsive-font(5vw, 35px, 150px, 50px);
///@mixin responsive-font($responsive, $min, $max: false, $fallback: false) : #) 
@if $max : #) 
}  @if $fallback 
font-size: $responsive;
}

請參閱codepen上eduardobouças （ @eduardoboucas ） 撰寫的pen viewport大小的字型，其中包含最小和最大尺寸 。

翻譯自:

具有最小和最大尺寸的視口大小的版式

沒有min font size或max font size，因此雖然以視口單位設定字型大小很酷，但很有可能您的font size在小螢幕上可能會變得太小或在大螢幕上會變得太大。eduardo boucas有乙個聰明的解決方法。當視口已到達將超過這些最小值 最大值的斷點時，請使用 查詢將font si...

查詢視窗滾動條的位置和視口尺寸

元素的位置是以畫素來度量的，有兩個不同的點作為座標系的原點 文件的左上角 在其中顯示文件的視口的左上角 在頂級視窗和標籤頁中，視口只是實際顯示文件內容的瀏覽器的一部分 他不包括瀏覽器的 外殼 如選單 工具欄和標籤頁 針對框架頁中顯示的文件，視口是定義了框架頁的元素。無論在何種情況下，當討論元素的位置...

螢幕的大小和尺寸

flame這個遊戲開發框架是以flutter為基礎的，而flutter在螢幕上繪製時使用邏輯畫素，因此，我們在flame上調整遊戲物件的大小時也是使用邏輯畫素。實際上，遊戲 game 抽象類上有個調整 resize 方法，這個方法接受大小 size 類引數，使用這個引數就可以確定裝置的螢幕大小。首先...