按我的理念來看，移動端自適應布局中，最常用的應該算是rem為單位的基準點布局了吧。
而在rem的布局中，其實最重要的點是，如何來計算這個html的font-size的大小。
還有一些不是需要那麼細緻的處理，也可以直接使用css的media屬性，根據元素的寬度進行設定html元素的font-size。
甚至還有一些其他的方式，這裡就不做說明，本篇其實想說的是，移動端的單頁屏局。
什麼叫做單屏布局呢，裝置的螢幕都是有尺寸限制的，而單屏布局就是乙個網頁的所有內容，只在乙個螢幕內展示，不會出現滾動條。
2 單屏布局的坑
何謂坑呢，坑其實也就是bug，但是又不能算是bug，或者說，不是bug，只是開發者在實現的過程中，沒有考慮到的狀況。
前端最重要的乙個問題就是相容，這裡的坑，主要的表現也只是在移動端的不相容問題。
單屏布局的乙個大坑就是：裝置的寬高比永遠都不是統一的，就比如，我們和設計師達成的協議就是，設計師輸出的設計稿，都是以750*1334為一屏高度的設計稿，但是真實的裝置，卻不止有這個尺寸，比如iphonex的長度就更長，有些android的就更短，當然，這裡說這麼多，不是要說，裝置的尺寸包含哪些，而是想說一點，不同的裝置，有不同的尺寸，那麼可視區域能展示的內容就會有不同。
那麼坑就來了，同乙個設計圖，卻要在不同尺寸的裝置上，都展示出良好（是良好，因為無法完美）的布局，這就是乙個比較大的坑了~
3 如何來解決這個坑。
寫到這裡，突然覺得廢話連篇，作為程式設計師，還是直接上**吧~
首先，移動端的適配，還是要先做好的，不管你是使用rem布局，還是使用media進行適配布局（只是單純的寬度上），布局好了，這裡只是寬度自適應了，如果是流式布局的話，這樣就已經足夠了，對於我們這裡的單屏布局，就略顯不足了。
所以這裡就要用的：device-aspect-ratio和aspect-ratio了。
乙個乙個的來說吧。
3.1 device-aspect-ratio
device-aspect-ratio 定義輸出裝置的螢幕可見寬度與高度的比率。所以，對於前端的開發者來開發單屏的頁面的話，這個屬性其實是不怎麼會用到的。
同時，device-aspect-ratio還有兩位兩個兄弟屬性，max-device-aspect-ratio和min-device-aspect-ratio，他們的相容性在移動端，是可以不用去考慮的，絕大部分的移動端裝置，都是支援的，在我看來，是可以直接放心使用的。
3.2 aspect-ratio
aspect-ratio 定義輸出裝置中的頁面可見區域寬度與高度的比率可視區域，這個對於我們來說，才是真正需要的。
直接就是上**吧：
@media screen and (min-aspect-ratio: 9/16)
@media screen and (max-aspect-ratio: 9/16)
@media screen and (aspect-ratio: 9/16)
aspect-ratio的取值：width/height，即寬度與高度的對比
這裡有一點要注意，只要設定了max-aspect-ratio或者min-aspect-ratio，那麼aspect-ratio就無效了，因為max-aspect-ratio或者min-aspect-ratio真實的表現是「小於等於」和「大於等於」。所以，如果你只是要監聽乙個比例的變化，而且，你需要使用到：
max-aspect-ratio，min-aspect-ratio，aspect-ratio這三個屬性的話，那麼就要按照本小節的示例**，把aspect-ratio寫在最後面。 頁面示例：示例。
同樣的，如果我們想要使用min-aspect-ratio來設定不同的尺寸的，那麼也要注意一點，要把大比例的寫在後面，就比如：1/1，3/4，9/16這三個比例的話，**的實現部分就要：
@media screen and (min-aspect-ratio: 9/16)
@media screen and (min-aspect-ratio: 3/4)
@media screen and (min-aspect-ratio: 1/1)
min-aspect-ratio的區域是大於等於，當前的裝置比例已經固定（假設為cur），我需要設定三個比例a(3) > b(2) > c(1)。再加上css的層疊覆蓋理論，後面定義的會覆蓋前面的。
那麼就會出現：如果cur > c，那麼cur > b ,cur > a ,這個時候，如果c的css放在了最後面，那麼無聊如何也不會執行到a和b了。
所以，要把大值（涵蓋區域廣的）放到最底部，這個也可也稱之為小區域理論。
3 – 正無窮 2 – 正無窮 1 – 正無窮
雖然在數學上來說，這個差距微乎其微，但是真實的情況確實是，css檔案中，定義的順序為： c ，b，a，也就是我們前面的一段**的定義順序。（這個如果真的理解不了，其實也可以不理解，寫好了，試一下就ok了啊~）（再加乙個理解方法，取屬性的字首min，越小的越先定義）
但同時也有一點注意，如果需要使用多次min-aspect-ratio的話，那就不要再使用max-aspect-ratio了，肯定會衝突的。
同理，max-aspect-ratio的情況也是相同的，只是定義的順序與min-aspect-ratio相反，max-aspect-ratio的定義順序是，max字首，越大的值越先定義，所以如果上述的一段**使用max-aspect-ratio來實現的話就是：
@media screen and (max-aspect-ratio: 1/1)
@media screen and (max-aspect-ratio: 3/4)
@media screen and (max-aspect-ratio: 9/16)
結尾
HTML 適配方案
標準適配方案 meta vp tab 快捷方式 示例 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 ...
rem 適配方案
首先我們要明白，為什麼要用rem單位呢，常用的px不好嗎？原因是如果我們用px作為長度大小單位的話，就無法根據螢幕大小變化實時改變頁面元素的大小，反之，rem就可以做到實時適配。其次，我們也要清楚以rem為單位的元素大小是根據css html根標籤下的文字大小 fontsize 來改變的。在實際開發...
rem適配方案
em大小是基於父元素的字型大小 rem是相對單位，r是root的意思，在html頁面上就是html標籤，所以rem的大小是基於html元素的字型大小 使用flex的伸縮布局 使用百分比的流式布局 使用 查詢的響應式布局，共同點就是元素只能做寬度的適配 除外 rem適配可以實現寬度和高度都能做到適配，...