16:9适配方案
?
技術點：
device-aspect-ratio與aspect-ratio單屏布局
1 移動端自適應布局
按我的理念來看，移動端自適應布局中，最常用的應該算是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，也能證明，這個屬性是按照設備的尺寸來的，為什么單獨說這個呢，因為不管是瀏覽器還是APP，所有的承載H5頁面的容器，都有自己的header頭以及最上面的手機時間功能顯示的區域，一般這些內容，會占去120px（雙倍屏上，這個數據可能不準，只是想說，會被這些占用設備可視區域的可用高度，如果你是在瀏覽器全屏的話，就當我沒說這些啦）的高度。
所以，對于前端的開發者來開發單屏的頁面的話，這個屬性其實是不怎么會用到的。
同時，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) {// 如果寬高比小于9:16的話，顯示這個內容}@media screen and (max-aspect-ratio: 9/16) {// 如果寬高比大于9:16的話，顯示這個內容}@media screen and (aspect-ratio: 9/16) {// 如果寬高比是9:16的話，顯示這個內容 }aspect-ratio的取值：width/height，即寬度與高度的對比
一般情況下，在PC端的是：width > height，在移動端的時候，width < height，所以，其實如何在移動端判斷是否為橫屏，也可以按照這個方式來判斷。 如果直接設置：aspect-ratio:9/16，那么就表示，只要在width/height = 9/16的情況下，才會被觸發，但是同一個手機，在APP和瀏覽器（甚至不同的瀏覽器），這個寬高比是不同的，如果單純的設置一個固定的值，還是很難穩定的實現某些功能的，所以也就提供了：max-aspect-ratio和min-aspect-ratio。?max-aspect-ratio : 9/16?表示如果當前頁面的width/height <= 9/16的話會被執行，max表現大于的時候，與max-width（表示最大的限制值）理論上是一樣的概念，寬高比不大于這個值的時候。 同樣的道理，min-aspect-ratio : 9/16表示，當寬高比大于等于這個值的時候，就會被執行。
這里有一點要注意，只要設置了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) {// 只要寬高比大于等于9/16，就會執行 }@media screen and (min-aspect-ratio: 3/4) {// 只要寬高比大于等于3/4，就會執行 }@media screen and (min-aspect-ratio: 1/1) {// 只要寬高比大于等于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) {// 只要寬高比小于等于1/1，就會執行 }@media screen and (max-aspect-ratio: 3/4) {// 只要寬高比小于等于3/4，就會執行 }@media screen and (max-aspect-ratio: 9/16) {// 只要寬高比小于等于9/16，就會執行 }查看示例：示例。
結尾
本篇文章主要在于想去理解aspect-ratio，min-aspect-ratio，max-aspect-ratio，也想要在單屏布局方面，有一些更好的實踐，關于單屏布局的文章，在前面有寫過一篇，在下一篇，也會總結這兩篇文章，總結一個個人最佳的實踐，希望可以幫助一些，也困惑于單屏布局的同學。
總結
- 上一篇： 市场是有效的吗？
- 下一篇： CDO (Climate Data Op