全屏HTML 5适配个人见解

秒速五厘米 2022-10-01 09:56 172阅读 0赞

## 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>
    复制代码

不同手机呈现如下：

*  虽然不同手机的宽高尺寸不一样，但是设置了`root font-size`之后，每个手机的宽度都是等量的`rem`，可以理解为每个手机的宽度都是一样的，区别在于高度不一样。

## 2.整屏项目 ##

*  如果项目是流式布局，用上述`rem`即可，不过有时候我们会遇到全屏布局的项目，这时候就要既保证宽度显示正常，高度也需要显示正常。 从上边图片中可以看到`rem`只能解决宽度适配，高度还是适配不了，短屏的露白比长屏的要少。接下来说一下我的适配方案：

### 1.垂直定位尽量用`%`,不要用固定单位，会导致长屏手机定位不正常； ###

.rect{
        position: absolute;
        left:0;
        top:25%;//垂直定位单位为%
        width:100%;
        height:1rem;
        margin-top:-.5rem;//以垂直中心定位
        background:red;
    }
    复制代码

例：

下图左侧定位用的是`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>
    ```
    复制代码

结果如下：

> 左侧是不加`auto-scale` 类名的，右侧是加了的，在不同尺寸下的渲染，左侧的会在窄屏溢出，右侧的不会。

### 3.整屏的设计稿中的背景层要宽一些，比如主要内容的设计尺寸是640\*1100,背景层要宽一些800 \*1100 ###

> 意思是psd的安全区域是640\*1100，这里的内容是要求每个手机都显示的，另外宽度要外扩一些尺寸，最终的设计尺寸是800 \*1100；

为什么要外扩一些背景呢？因为一般背景层都要设置 `background-size: cover`来填充，而外扩一些宽度可以更好的适配更多尺寸的屏幕。

来看下例子:

> 左侧的没有外扩些宽度，右侧的有

## 综合起来就是下边的效果： ##

> 注：psd高度为什么是1100，而不是1236，1100是除去了app的titlebar之后的尺寸，前端控制不了的部分设计人员可以把他忽略掉

转载于:https://juejin.im/post/5c78c9f96fb9a04a0a5fe2b6