如何处理跨平台的自适应问题

Posted 2020-10-12 Vicky_YU

淘宝如何动态设置html的font-size？和网易家对比有何不同?

 

相信大家在面试的过程中总会被问到如何处理自适应这样的相关问题，自适应其实就是根据视口的大小或者说用户平台的不同呈现出不同或相同的样式，有这么几种方案：

1. 使用flexbox弹性布局的方法
2. 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案
3. 使用rem

---------------------------分------------割------------------------------------- 

淘宝rem的例子

看看淘宝在不同分辨率下，呈现的效果：

淘宝的效果跟网易的效果其实是类似的，随着分辨率的变化，页面元素的尺寸和间距都相应变化，这是因为淘宝的尺寸也是使用了rem的原因。在介绍它的做法之前，先来了解一点关于viewport的知识，通常我们采用如下代码设置viewport:

<meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小，也就是device-width。这个device-width的计算公式为：

设备的物理分辨率/(devicePixelRatio * scale)，在scale为1的情况下，device-width = 设备的物理分辨率/devicePixelRatio 。·

devicePixelRatio称为设备像素比，每款设备的devicePixelRatio都是已知，并且不变的，目前高清屏，普遍都是2，不过还有更高的，比如2.5, 3 等，我魅族note的手机的devicePixelRatio就是3。淘宝触屏版布局的前提就是viewport的scale根据devicePixelRatio动态设置：

在devicePixelRatio为2的时候，scale为0.5

在devicePixelRatio为3的时候，scale为0.3333

这么做目的当然是为了保证页面的大小与设计稿保持一致了，比如设计稿如果是750的横向分辨率，那么实际页面的device-width，以iphone6来说，也等于750，这样的话设计稿上标注的尺寸只要除以某一个值就能够转换为rem了。通过js设置viewport的方法如下：

//code from http://caibaojian.com/mobile-responsive-example.html
var scale = 1 / devicePixelRatio;
document.querySelector(\'meta[name="viewport"]\').setAttribute(\'content\',\'initial-scale=\' + scale + \', maximum-scale=\' + scale + \', minimum-scale=\' + scale + \', user-scalable=no\');

淘宝布局的第二个要点，就是html元素的font-size的计算公式，font-size = deviceWidth / 10：

接下来要解决的问题是，元素的尺寸该如何计算，比如说设计稿上某一个元素的宽为150px，换算成rem应该怎么算呢？这个值等于设计稿标注尺寸/该设计稿对应的html的font-size。拿淘宝来说的，他们用的设计稿是750的，所以html的font-size就是75，如果某个元素时150px的宽，换算成rem就是150 / 75 = 2rem。总结下淘宝的这些做法：

• （1）动态设置viewport的scale

  var scale = 1 / devicePixelRatio;
  document.querySelector(\'meta[name="viewport"]\').setAttribute(\'content\',\'initial-scale=\' + scale + \', maximum-scale=\' + scale + \', minimum-scale=\' + scale + \', user-scalable=no\');

• （2）动态计算html的font-size

  document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + \'px\';

• （3）布局的时候，各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10
• （4）font-size可能需要额外的媒介查询，并且font-size不使用rem，这一点跟网易是一样的。

最后还有一个情况要说明，跟网易一样，淘宝也设置了一个临界点，当设备竖着时横向物理分辨率大于1080时，html的font-size就不会变化了，原因也是一样的，分辨率已经可以去访问电脑版页面了。

 

比较网易与淘宝的做法

共同点：

• 都能适配所有的手机设备，对于pad，网易与淘宝都会跳转到pc页面，不再使用触屏版的页面
• 都需要动态设置html的font-size
• 布局时各元素的尺寸值都是根据设计稿标注的尺寸计算出来，由于html的font-size是动态调整的，所以能够做到不同分辨率下页面布局呈现等比变化
• 容器元素的font-size都不用rem，需要额外地对font-size做媒介查询
• 都能应用于尺寸不同的设计稿，只要按以上总结的方法去用就可以了

不同点

• 淘宝的设计稿是基于750的横向分辨率，网易的设计稿是基于640的横向分辨率，还要强调的是，虽然设计稿不同，但是最终的结果是一致的，设计稿的尺寸一个公司设计人员的工作标准，每个公司不一样而已
• 淘宝还需要动态设置viewport的scale，网易不用
• 最重要的区别就是：网易的做法，rem值很好计算，淘宝的做法肯定得用计算器才能用好了 。不过要是你使用了less和sass这样的css处理器，就好办多了，以淘宝跟less举例，我们可以这样编写less：

//定义一个变量和一个mixin

@baseFontSize: 75;//基于视觉稿横屏尺寸/100得出的基准font-size
.px2rem(@name, @px){
    @{name}: @px / @baseFontSize * 1rem;
}

//使用示例：

.container {
    .px2rem(height, 240);
}

//less翻译结果：
.container {
    height: 3.2rem;
}

 

总结：

所有的rem方案都是基于设计稿而言，大家不要被以上各种公式搞混。步骤如下

1. 给html根节点设置一个基础font-size值，然后页面的所有元素布局均相对于该font-size值采用rem单位设定。

2. 假设设计稿的尺寸为640px，iphone5的屏幕分辨率为320px，计算出来的font-size值就是 320 / 640 = 0.5，因为得出的font-size太小，不方便计算，且有的浏览器可能不兼容太小字号，所以将font-size放大100倍，所以最终计算出来的font-size为 320 / 640 * 100 = 50(px); 常见的分辨率下，font-size的值如下

   deviceWidth = 320，font-size = 320 / 6.4 = 50px
   deviceWidth = 375，font-size = 375 / 6.4 = 58.59375px
   deviceWidth = 414，font-size = 414 / 6.4 = 64.6875px
   deviceWidth = 500，font-size = 500 / 6.4 = 78.125px 

3. 页面元素该如何设置宽高、边距。假如一个div在设计稿上的尺寸为140px，则直接赋值为1.4rem。因为html的font-size是放大了100倍，所以计算rem时，要用设计稿的实际像素除以100，140px / 100 = 1.4rem; 最后实际的像素大小就会由deviceWidth跟设计稿的横向宽 的 比例 自动计算出来。

 

---------------------------分------------割------------------------------------- 

 

以上内容摘自

流云诸葛——从网易与淘宝的font-size思考前端设计稿与工作流

移动端web app自适应布局探索与总结

感谢大神们的实践总结~