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

距离上一次发文貌似有段时间了，多是最近项目太忙，也多是变懒了。。总之无论什么缘由，开始咱们今天的主题：移动端终极解决方案---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值。