多屏适配笔记

关于前端屏幕适配方案这块，目前主要使用过以下6个方案：

1、rem 

通过js根据当前设备屏幕宽度，动态计算元素长度单元。

var html = document.getElementsByTagName('html')[0];
var pageWidth = html.getBoundingClientRect().width;
html.style.fontSize = pageWidth / 10 + 'px';

例如屏幕宽度为1080px，则fontSize为108px，1rem=108px。

该方案在pc端使用，切换屏幕element、font过大或过小，图片失真，不适合在pc端全局使用。

在移动端使用，加上下面代码，保证页面不会变形：

var pixclPatio = 1 / window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,initial-scale='+pixclPatio+',minimum-scale='+pixclPatio+',maximum-scale='+pixclPatio+',user-scalable=no" />');

附：

initial-scale 初始的缩放比例；minimum-scale最小的缩放比例；maximum-scale最大的缩放比例；user-scalable 用户是否可以调整缩放比例。

由于开发中，需要将 px 转 rem 计算比较麻烦，在vue中可使用px2ren插件，将px单位转rem。

 

2、百分比

bootstrap的栅栏布局、element UI 栅格布局都是根据100%划分的，适合页面宽度自适应，页面高度不限定可视区域的设计，对于字体、行距等无法进行定义。

对于高度限定在可视区域，限制不允许出现的滚动条的设计，用百分比实现，会造成页面出现“不应该”出现的滚动条，或页面超出可视区域。

 

3、vw vh

100 vw 页面视口宽度，100vh页面视口高度，使用与百分比方案相似，区别在于这两个单位可用于字体、行距。

 

4、em

em与rem区别在于：em相对于父元素，rem相对于根元素

适合封装类似按钮，选择框等小组件样式，改变父级元素样式，自己元素样式也随之变化，不想需要重新调整。

例如，给字体设置大小，line-height 使用 em ，当字体变化时，不需要更改行高。

 

5、多媒体查询

使用@media查询，根据不同的屏幕尺寸些不同的样式代码，例如移动端横屏、竖屏的步骤条样式变化。

@media screen and (max-width: 375px) {
    body {
        background-color:red;
    }
}

如果屏幕宽度小于375px，背景颜色为红色。

缺点在于，适配屏幕多，需要写不同的样式代码。

 

6、css calc()

calc()用于动态计算长度，适用于部分固定，部分自使用的布局。

例如，管理平台，常使用左侧导航固定，右侧内容自适应的布局，自使应部分可用 calc(100vw -  200px )定义宽度。