全屏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>
```
复制代码

结果以下：安全