hotcss知识

女爷i 2021-07-04 16:59 322阅读 0赞

> 让移动端布局开发更加容易

### 介绍 ###

*  `hotcss`不是一个库，也不是一个框架。它是一个移动端布局开发解决方案。使用`hotcss`可以让移动端布局开发更容易。
 *  使用动态的HTML根字体大小和动态的`viewport scale`。
 *  遵循视觉一致性原则。在不同大小的屏幕和不同的设备像素密度下，让你的页面看起来是一样的。
 *  不仅便捷了你的布局，同时它使用起来异常简单。可能你会说 `talk is cheap,show me the code`，那我现在列下hotcss整个项目的目录结构。

├── example	//所有的示例都在这个目录下
    │   ├── duang
    │   ├── normal
    │   └── wolf
    │
    └── src	//主要文件在这里
        ├── hotcss.js
        ├── px2rem.less
        ├── px2rem.scss
        └── px2rem.styl

<table> 
 <thead> 
  <tr> 
   <th align="left">示例名称</th> 
   <th align="left">演示地址</th> 
   <th align="center">贡献者</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">普通的演示</td> 
   <td align="left">http://imochen.github.io/hotcss/example/normal/</td> 
   <td align="center">墨尘</td> 
  </tr> 
  <tr> 
   <td align="left">duang游戏</td> 
   <td align="left">http://imochen.github.io/hotcss/example/duang/</td> 
   <td align="center"><a href="https://github.com/Keraun" rel="nofollow">阳阳</a></td> 
  </tr> 
  <tr> 
   <td align="left">灰太狼</td> 
   <td align="left">http://imochen.github.io/hotcss/example/wolf/</td> 
   <td align="center"><a href="https://github.com/Keraun" rel="nofollow">阳阳</a></td> 
  </tr> 
 </tbody> 
</table>

### 谁在用`hotcss` ###

*  [熊猫TV][TV]
 *  [美丽说HIGO][HIGO]
 *  [奇虎360][360]
 *  [爆米兔][Link 1]
 *  [一起作业][Link 2]
 *  [TalkingData][]
 *  [电兔贷款][Link 3]
 *  [新浪show][show]

### 优势 ###

*  保证不同设备下的统一视觉体验。
 *  不需要你再手动设置`viewport`，根据当前环境计算出最适合的`viewport`。
 *  支持任意尺寸的设计图，不局限于特定尺寸的设计图。
 *  支持单一项目，多种设计图尺寸，专为解决大型，长周期项目。
 *  提供`px2rem`转换方法，CSS布局，零成本转换，原始值不丢失。
 *  有效解决移动端真实1像素问题。

### 用法 ###

#### 引入`hotcss.js` ####

根据页面渲染机制，`hotcss.js`必须在其他`JS`加载前加载，万不可异步加载。

如果可以，你应将`hotcss.js`的内容以内嵌的方式写到`<head>`标签里面进行加载，并且保证在其他js文件之前。

**为了避免不必要的`bug`，请将CSS放到该JS之前加载。**

#### `css`要怎么写 ####

你可能已经注意到在`src/`目录下有`px2rem.scss/px2rem.less/px2rem.styl`三个文件。没错，这就是`hotcss`提供的将`px`转为`rem`的方法，可根据您的需要选择使用。

推荐使用`scss`来编写`css`，在scss文件的头部使用`import`将`px2rem`导入

@import '/path/to/px2rem.scss';

如果你的项目是单一尺寸设计图，那么你需要去`px2rem.scss`中定义全局的`designWidth`。

@function px2rem( $px ){
    	@return $px*320/$designWidth/20 + rem;
    }
    $designWidth : 750; //如设计图是750

如果你的项目是多尺寸设计图，那么就不能定义全局的`designWidth`了。需要在你的业务`scss`中单独定义。如以下是`style.scss`

@import '/path/to/px2rem.scss';
    $designWidth : 750; //如设计图是750

`$designWidth`必须要在使用`px2rem`前定义。否则scss编译会出错。

注意：如果使用`less`，则需要引入`less-plugin-functions`，普通的`less`编译工具无法正常编译。

#### 想用`px`怎么办？ ####

直接写`px`肯定是不能适配的，那`hotcss.js`会在`html`上注册`data-dpr`属性，这个属性用来标识当前环境`dpr`值。那么要使用`px`可以这么写。

//scss写法
    #container{
    	font-size: 12px ;
    	[data-dpr="2"] &{
    		font-size: 24px;
    	}
    	[data-dpr="3"] &{
    		font-size: 36px;
    	}
    }

### 接口说明 ###

#### `initial-dpr` ####

可以通过强制设置`dpr`。来关闭响应的`viewport scale`。使得`viewport scale`始终为固定值。

#### `max-width` ####

通过设置该值来优化平板/PC访问体验，注意该值默认值为`540`。设置为`0`则该功能关闭。  
为了配合使用该设置，请给`body`增加样式`width:16rem;margin:0 auto;`。

#### `design-width` ####

通过对`design-width`的设置可以在本页运行的JS中直接使用`hotcss.px2rem/hotcss.rem2px`方法，无需再传递第二个值。

#### `hotcss.mresize` ####

用于重新计算布局，一般不需要你手动调用。

hotcss.mresize();

#### `hotcss.callback` ####

触发`mresize`的时候会执行该方法。

hotcss.callback = function(){ 
      //your code here
    }

#### 单位转换`hotcss.px2rem/hotcss.rem2px` ####

`hotcss.px2rem` 和 `hotcss.rem2px`。你可以预先设定`hotcss.designWidth`可以在`meta`中设置`design-width`，则之后使用这两个方法不需要再传递第二个参数。

迭代后仍然支持在js中设置`hotcss.designWidth`，推荐使用`meta`去设置。

/** * [px2rem px值转换为rem值] * @param {[number]} px [需要转换的值] * @param {[number]} designWidth [设计图的宽度尺寸] * @return {[number]} [返回转换后的结果] */
    hotcss.px2rem( px , designWidth );
    
    /** * 同上。 * 注意：因为rem可能为小数，转换后的px值有可能不是整数，需要自己手动处理。 */
    hotcss.rem2px( rem , designWidth );
    
    
    //你可以在meta中定义design-width，此后使用px2rem/rem2px，就不需要传递designWidth值了。同时也支持旧的设置方式，直接在JS中设置hotcss.designWidth
    hotcss.px2rem(200);
    hotcss.rem2px(350);

--------------------

## `hotcss.js`源码 ##

[TV]: http://www.panda.tv/?from=hotcss
[HIGO]: http://higo.meilishuo.com/
[360]: http://www.360.com/
[Link 1]: http://www.baomitu.com/
[Link 2]: http://17zuoye.com/
[TalkingData]: http://www.talkingdata.com/
[Link 3]: http://app.diantudaikuan.com/?from=hotcss
[show]: http://show.sina.com.cn/