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

介绍官网

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

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

优势

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

用法

引入hotcss.js

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

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

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

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

css要怎么写
你可能已经注意到在src/目录下有px2rem.scss/px2rem.less两个文件。没错，这就是hotcss提供的将px转为rem的方法。

推荐使用scss来编写css，在scss文件的头部使用import将px2rem导入(vue中已经内置了对scss的支持)

该网站不支持scss代码高亮显示,别识别为了HTML[qq:29]

@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可以这么写。

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

还有一些接口说明具体见[hotcss官网][官网]

vue中简单使用
对根目录下的index.html进行修改

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue</title>
    <!-- 无需配置viewport -->
    <script src="./static/js/hotcss.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

在具体的.vue文件中,或者是.scss文件中就可以直接使用rem进行布局,如想在里面使用px2rem函数,则需先导入px2rem.scss

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
@import '../../static/css/px2rem.scss';
  h2 {
    font-size: px2rem(32), width: 2rem }
</style>