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
1 | <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导入
1 | @import '/path/to/px2rem.scss'; |
如果你的项目是单一尺寸设计图，那么你需要去px2rem.scss中定义全局的designWidth。
1 2 3 4 | @function px2rem( $px ){ @return $px*320/$designWidth/20 + rem;}$designWidth : 750; //如设计图是750 |
如果你的项目是多尺寸设计图，那么就不能定义全局的designWidth了。需要在你的业务scss中单独定义。如以下是style.scss
1 2 | @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可以这么写。
1 2 3 4 5 6 7 8 9 10 | //scss写法#container{ font-size: 12px ; [data-dpr="2"] &{ font-size: 24px; } [data-dpr="3"] &{ font-size: 36px; }} |
接口说明
initial-dpr
可以通过强制设置dpr。来关闭响应的viewport scale。使得viewport scale始终为固定值。
1 2 3 4 5 6 | <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;。
1 2 3 4 5 6 7 8 9 10 11 | <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方法，无需再传递第二个值。
1 2 | <meta name="hotcss" content="design-width=750"><script src="/path/to/hotcss.js"></script> |
hotcss.mresize
用于重新计算布局，一般不需要你手动调用。
1 2 | hotcss.mresize();hotcss.callback |
触发mresize的时候会执行该方法。
1 2 3 | hotcss.callback = function(){ //your code here} |
单位转换hotcss.px2rem/hotcss.rem2px
hotcss.px2rem 和 hotcss.rem2px。你可以预先设定hotcss.designWidth可以在meta中设置design-width，则之后使用这两个方法不需要再传递第二个参数。
迭代后仍然支持在js中设置hotcss.designWidth，推荐使用meta去设置。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /*** [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.designWidthhotcss.px2rem(200);hotcss.rem2px(350); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery 3D效果的轮播
- 下一个特效： jQuery悬浮HTML5音乐播放器插件QPlayer