移动端布局终极解决方案 ---- hotcss

为什么80%的码农都做不了架构师？>>>   

距离上一次发文貌似有段时间了，可能是最近项目太忙，也可能是变懒了。。总之不管什么原因，开始我们今天的主题：移动端终极解决方案---hotcss(https://github.com/imochen/hotcss)!

介绍

hotcss不是一个库，也不是一个框架。它是一个移动端布局开发解决方案。使用hotcss可以让移动端布局开发更容易。

使用动态的HTML根字体大小和动态的viewport scale。

遵循视觉一致性原则。在不同大小的屏幕和不同的设备像素密度下，让你的页面看起来是一样的。

优势

保证不同设备下的统一视觉体验。

不需要你再手动设置viewport,根据当前环境计算出最适合的viewport。

支持任意尺寸的设计图，不局限于特定尺寸的设计图。

支持单一项目，多种设计图尺寸，专为解决大型，长周期项目。

提供px2rem转换方法，CSS布局，零成本转换，原始值不丢失。

有效解决移动端真实1像素问题。

用法

在head标签中引入hotcss.js文件，注意hotcss.js文件必须放在css文件之后引入。

hotcss默认以640px的设计稿来计算html根字体大小，通过以下代码计算出在320px的屏幕下，html根元素字体大小的值：

在320px的屏幕下html根元素的字体大小为20px，我们从设计稿中测量出来的尺寸都要除以20来转换成rem值。

但如果ui设计师给我们的设计稿尺寸是750px的时候该怎么办呢？我们先来计算一下在375px的屏幕下hotcss会将html根元素字体大小设置成多少。

根据源码中的计算公式 innerWidth*20/320求375*20/320 = 23.4375。也就是说在375px的屏幕下html根元素字体为23.4375px，我们在编码的时候要将所有的尺寸除以23.4375来转换成rem。

除以23.4375.。。。真是一个好蠢的做法，不要慌，咱们稍微更改一下源码就ok了。

将之前的除数320改成375，那么html根元素的字体大小就成了20px，我们在编码中只需要将设计稿中的尺寸除以20就能轻轻松松转换成对应的rem值了。

等一下！！！用心的同学肯定注意到了这样一件事，375px的屏幕设备像素比dpr是2，也就是说设计稿上的1像素（逻辑像素）等于2物理像素（设备像素），我们750px设计稿上的尺寸得先除以2换算成设备像素，再去除以html根元素的值转换成相应的rem。

没错，如果是之前的一些rem适配方案，你确实需要这么做，但上文我们介绍hotcss优势的时候就有提到过hotcss不需要我们再手动的设置viewport，它会自动对viewport进行缩放。例如在375px的屏幕里，hotcss会自动将viewport的initial-scale设置为0.5，动态缩小了一半，就相当于之前我们做rem适配方案时的除以2啦，怎么样，是不是很棒？

但是，在实际开发中还是遇到了一个问题，那就是我们项目中使用的一些ui框架他的css样式尺寸是按设备像素来编码的，hotcss对viewport进行缩放之后ui框架中使用到的一些样式也会进行对应的缩放，这真是一个令人头疼的事情。

解决的办法有两种：一是手动将ui框架中使用的像素转换成对应的rem，二是禁用viewport缩放，解除对ui框架样式的影响。

我在项目中使用的是第二种解决方案，禁用viewport缩放，hotcss的文档里提供了解决方案，如下：

当然，禁止viewport缩放也会带来一些影响，hotcss文档中也提到了这一点。但个人觉得利大于弊。禁止viewport缩放之后，我们就要考虑设备像素比dpr了，就像上文提到的，若ui工程师提供的是750px的设计稿，我们在编码css像素的时候就应当先除以2再除以20，也就是除以40来换算出对应的rem值。

转载于:https://my.oschina.net/cc4zj/blog/2254551