功課傳送門:大屏上的全屏頁面的自適應(yīng)適配方案
rem 方案
rem (font size of the root element), 是 css3 的引入的一個(gè)大小單位。即相對(duì)于根元素的 font-size 值的大小恕沫。所謂根元素在網(wǎng)頁里一般就是 html. 舉例說明：下例中门驾，html 的 font-size 大小是 20px, 那么 1.4rem 和 2.4 rem 就分別代表著 28px 和 48px 了旭贬。
假設(shè)我們的設(shè)計(jì)稿其尺寸為 1920 * 1280 px，但屏幕有各式各樣的比例與大小，為防止元素布局比例被拉伸扭曲等等，
理想的效果就是讓實(shí)際畫布同比例縮小與放大并且垂直居中浑吟，窗口多余空間留白，如下:
由于rem相對(duì)html中的font-size耗溜，rem又決定了元素的顯示的大小组力，那么關(guān)鍵就在于font-size的設(shè)置。
特殊值代入：
**設(shè)計(jì)稿是這樣的一個(gè) 1920 * 1080（16：9）的圖抖拴，實(shí)際顯示器屏幕是1200*675 （同比例）
若將設(shè)計(jì)稿寬度10等分（自定義等分燎字，方便計(jì)算就行） 并設(shè)fontSize=1920px/10 ，則1rem=192px 即：fontSize=1rem=1等分=192ox
倘若該設(shè)計(jì)稿中有個(gè)元素 寬度正好為192px阿宅。用rem表示即width:1rem;? 元素寬度占設(shè)計(jì)稿總寬度的比例為1：10?
那么候衍，若想在1200px的屏幕也顯示相同比例的該元素，則元素高度應(yīng)為1200px*（1/10）=120px 家夺；此時(shí) fontSize=1rem=1等分=120px
通過設(shè)置fontSize 來改變1rem的值 從而來改變整體畫布及其元素大小，fontSize=實(shí)際屏幕width/自定義等分?jǐn)?shù)
一伐弹、屏幕（窗口）尺寸和設(shè)計(jì)稿比例一致時(shí)拉馋，完全占滿
二、屏幕（窗口）尺寸比設(shè)計(jì)圖比例瘦時(shí)惨好，左右占滿（鋪滿寬度）煌茴，上下留白，日川，并上下居中, 顯示的比例保持(x:y)
三蔓腐、屏幕（窗口）尺寸比設(shè)計(jì)圖比例胖時(shí)，顯示的比例保持(x:y)龄句，此時(shí)若將寬度鋪滿屏幕回论，則高度會(huì)超出屏幕(出現(xiàn)滾動(dòng)條散罕，出現(xiàn)問題)
問題在于，我們上述fontSize僅將屏幕寬作為基準(zhǔn)傀蓉，以鋪滿寬度為基礎(chǔ)欧漱，忽略了高度相對(duì)較小的情況
修正：要鋪滿較小邊，以較小邊為基準(zhǔn)葬燎。所以误甚，先計(jì)算出按同比例超出的高度=屏幕寬*(設(shè)計(jì)稿高/設(shè)計(jì)稿寬)，再按超級(jí)高度縮小為實(shí)際高度谱净，則寬度跟著縮小窑邦，縮小的寬=屏幕寬*（實(shí)際高度/超出的高），
化簡(jiǎn)即：fontSize=屏幕寬*（實(shí)際高度/超出的高）/自定義等分?jǐn)?shù)=（屏幕寬/自定義等分?jǐn)?shù)）*(設(shè)計(jì)稿寬高比/實(shí)際屏幕寬高比)
在代碼中體現(xiàn)就是：判斷實(shí)際寬高比與設(shè)計(jì)稿寬高比壕探，當(dāng)實(shí)際寬高比>設(shè)計(jì)稿寬高比時(shí)冈钦，將原有fontSize*(設(shè)計(jì)稿寬高比/實(shí)際屏幕寬高比)
