全屏HTML 5適配我的看法

時間 2019-12-01

標籤全屏 html 適配我的看法欄目 HTML 简体版

原文原文鏈接

1. rem佈局

rem（font size of the root element）是指相對於根元素的字體大小的單位。
例子：

<!doctype html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
        html{
            /*以寬度640的設計爲例*/
            /*demo用的是vw單位，想要兼容性好的話，用js動態寫fontSize*/
            /*最後的乘以100，是由於font-size不能小於瀏覽器內置的最小字號，乘以100即好計算又大於內置最小字號*/
            font-size:calc(100vw/640*100); 
        }
        .cube{
            position: absolute;
            top: 0;
            left: 0;
            width: 6.4rem;
            height: 6.4rem;
            background:red;
        }
    </style>
</head>
<body>
    <span class="cube"></span>
</body>
</html>
複製代碼

不一樣手機呈現以下：css

雖然不一樣手機的寬高尺寸不同，可是設置了root font-size以後，每一個手機的寬度都是等量的rem，能夠理解爲每一個手機的寬度都是同樣的，區別在於高度不同。

2.整屏項目

若是項目是流式佈局，用上述rem便可，不過有時候咱們會遇到全屏佈局的項目，這時候就要既保證寬度顯示正常，高度也須要顯示正常。從上邊圖片中能夠看到rem只能解決寬度適配，高度仍是適配不了，短屏的露白比長屏的要少。接下來講一下個人適配方案：

1.垂直定位儘可能用`%`,不要用固定單位，會致使長屏手機定位不正常；

.rect{
    position: absolute;
    left:0;
    top:25%;//垂直定位單位爲%
    width:100%;
    height:1rem;
    margin-top:-.5rem;//以垂直中心定位
    background:red;
}
複製代碼

例：html

下圖左側定位用的是`rem`，右側垂直定位用的是`%`
複製代碼

2. 運用Media query去適當縮小元素，預防短屏適配過於擁擠。

上圖能夠理解元素垂直定位運用%會引發相鄰元素的相對位置會發生改變，當元素過大時，在窄屏內就會過於擁擠，能夠用css的Media query來避免這個問題；前端

aspect-ratio 定義輸出設備中的頁面可見區域寬度與高度的比率瀏覽器

```
<!doctype html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <style>
        html{
            font-size:calc(100vw/640*100); 
        }
        .cube{
            position: absolute;
            top: 50%;
            left: 0;
            width: 6.4rem;
            height: 11rem;
            background:red;
        }
        @media screen and (min-aspect-ratio: 640/1050) {
            .auto-scale{
                transition:transform .5s;
                transform:scale(0.95);
            }
        }
        @media screen and (min-aspect-ratio: 640/1000) {
            .auto-scale{
                transform:scale(0.9);
            }
        }
        @media screen and (min-aspect-ratio: 640/950) {
            .auto-scale{
                transform:scale(0.85);
            }
        }
        @media screen and (min-aspect-ratio: 640/900) {
          .auto-scale{
              transform:scale(0.8);
          }
        }
    </style>
</head>
<body>
    <span class="cube auto-scale"></span>
</body>
</html>
```
複製代碼

結果以下：安全