全屏HTML 5适配 个人见解

2,089 阅读3分钟

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之后的尺寸,前端控制不了的部分设计人员可以把他忽略掉