hotcss.js------移动端布局优秀的解决方案

简介

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

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

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

• 不仅便捷了你的布局，同时它使用起来异常简单。可能你会说 talk is cheap,show me the code，那我现在列下hotcss整个项目的目录结构。

文件目录

src	//主要文件在这里
├── hotcss.js
├── px2rem.less
├── px2rem.scss
└── px2rem.styl

基本用法

<script src="/path/to/hotcss.js"></script>

scss中使用

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

#header{
    width: px2rem(640);
    height: px2rem(88);
    line-height: px2rem(88);
    background-color: #33aa33;
    text-align: center;
    font-size: px2rem(48);
    color: rgba(255,255,255,1);
}

less中使用

*注意：如果使用less，则需要引入less-plugin-functions，普通的less编译工具无法正常编译。*
@import './px2rem.less';
$designWidth : 750; //如设计图是750

#header{
    width: px2rem(640);
    height: px2rem(88);
    line-height: px2rem(88);
    background-color: #33aa33;
    text-align: center;
    font-size: px2rem(48);
    color: rgba(255,255,255,1);
}