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

所属分类:UI-布局

 2325  40  查看评论 (3)
移动端布局终极解决方案hotcss ie兼容9

hotcss

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

介绍

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

谁在用hotcss

  • 熊猫TV

  • 美丽说HIGO

  • 奇虎360

  • 爆米兔

  • 一起作业

  • TalkingData

  • 电兔贷款

  • 新浪show

  • 优势

保证不同设备下的统一视觉体验。

不需要你再手动设置viewport,根据当前环境计算出最适合的viewport。

支持任意尺寸的设计图,不局限于特定尺寸的设计图。

支持单一项目,多种设计图尺寸,专为解决大型,长周期项目。

提供px2rem转换方法,CSS布局,零成本转换,原始值不丢失。

有效解决移动端真实1像素问题。

用法

引入hotcss.js

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

根据页面渲染机制,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始终为固定值。

<meta name="hotcss" content="initial-dpr=1">
<script src="/path/to/hotcss.js"></script>
<!--
如iphone微信强设dpr=1,则可以长按识别二维码。
注意,强制设置dpr=1后,css中的1px在2x,3x屏上则不再是真实的1px。
-->

max-width

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

<meta name="hotcss" content="max-width=640">
<script src="/path/to/hotcss.js"></script>
<!--
默认为540,可根据具体需求自己定义
-->
<style>
body{
    width: 16rem;
    margin: 0 auto;
}
</style>

design-width

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

<meta name="hotcss" content="design-width=750">
<script src="/path/to/hotcss.js"></script>

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);

相关插件-布局

后台上移下移,编辑,删除效果

jq的灵活运用后台上移下移,编辑,删除效果
  布局
 6164  68

jQuery无限滚动加载图片瀑布流代码

jQuery无限滚动瀑布流式显示
  布局
 7987  57

非常漂亮的后台管理软件模板

使用简单,兼容性强,跨多种终端
  布局
 10099  124

Notebook

bootstrap 页面模板
  布局
 12934  162

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币

    Moyi 0
    2017/2/9 11:17:58
    SiriBen 0
    2017/1/7 9:01:58

    好像很厉害滴样子,先下载来看看,不知道能搞懂不

    回复
    锐不可当 0
    2017/1/4 18:01:10

    好像很腻害的样子,先下载再说。

    回复
取消回复
    PROMULGATOR

    BenYan100

    天津市