距离上一次发文貌似有段时间了,可能是最近项目太忙,也可能是变懒了。。总之不管什么原因,开始我们今天的主题:移动端终极解决方案---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值。