移动端布局解决方案 --- 简洁而不简单
hotcss
不是一个库,亦不是一个框架。通俗点讲,这是一个解决方案。用于解决移动端布局中遇到的单位等问题。
hotcss
遵循视觉一致性原则,即不同屏幕下页面比例是一致的,同时hotcss
不提倡使用在跨设备的开发中(当然不提倡和不可以是两个概念)。
另外,为了辅助开发hotcss
提供了gulp编译,可查看如何编译
提供一个演示示例。进入src/test/
,使用bower
安装hotcss
即可体验。
hotcss
不需要你再手动设置viewport
,她会根据当前环境计算出最适合的viewport
。- 在使用
hotcss
的过程中,所有的单位应该使用px2rem,无论css中还是JS中。 - 上述提到的
所有的单位
并不准确,如果你需要解决移动端1px这个世纪难题,则可以直接写1px,而无需使用px2rem。并且,这个1px在所有设备中是真的1px。 - 同时
hotcss
支持单项目多设计图(设计图尺寸不一样),只需要在你的css中定义设计图尺寸即可
可以使用bower
或者npm
来安装hotcss
。
bower install hotcss --save
npm install hotcss --save
如果你不乐意使用这两种方法,也可以直接复制源码或者使用git clone
等你喜欢的方式。
引入hotcss.js
,该JS必须在<body>
前加载,如果能内嵌到HTML中,效果更好。当然这个JS是非常小的,只有区区几行,压缩后更是不值一提,建议使用内嵌方式直接写到<head>
里面。
<!-- /index.html-->
<script src="../bower_components/hotcss/dest/hotcss.js"></script>
注意事项:
- 不能将此JS放到
<body>
后加载,或者异步加载。这样会导致加载完毕后页面一团乱,然后会有明显的视觉跳动,继而才会恢复正常。
根据你使用的css预编译语言,将hotcss.less
/hotcss.scss
import到你的less/scss文件中去,然后定义你的设计图宽度designWidth
。
/* /src/scss/style.scss */
@import '../../bower_components/hotcss/dest/hotcss.scss';
$designWidth : 750;
/* /src/less/style.less */
@import '../../bower_components/hotcss/dest/hotcss.less';
@designWidth : 750;
注意事项:
- 如果你的设计图都是同样的宽度,你可以去
hotcss.**ss
中直接定义全局designWidth
。 - 每个css预编译文件都需要导入
hotcss.**ss
,如果你没有全局的designWidth
,还需要定义designWidth
。 - 在css预编译文件中使用
px2rem(375)
,尺寸是你在设计图上测量出来的px值,无需经过任何处理。直接交给px2rem
即可。
作为一个解决方案,怎么可能让你自己费心再找编译方法呢,没错,这些都已经为你准备好了,你需要做的就是按步骤配置一下即可。
建议开发目录,所有的开发都在src目录下进行,dev目录为开发目录,watch的时候访问此目录,release目录为发布目录
├── bower_components
│ └── hotcss
├── dev
├── release
├── src
│ ├── css
│ ├── img
│ ├── index.html
│ └── js
└── tools
进入项目根目录,使用cp
命令将tools
文件夹复制到根目录,注意命令最后空格后有一个点。
cp -R bower_components/hotcss/src/tools .
cp -R node_modules/hotcss/src/tools .
进入tools目录,执行npm install
安装必需的package。
cd tools/
npm install
配置tools/config.js
怎么配置在注释里面都已经写的很清楚了,如仍然遇到问题,可以与我取得联系。
在tools
目录下执行gulp watch
如果当前环境有浏览器,会自动打开http://127.0.0.1:13097/dev/
享受开发的乐趣吧
gulp css
:仅编译css预编译文件。gulp watch-css
:仅watch css预编译文件,不会自动刷新。gulp watch
:watch所配置文件,自动起http服务,同时自带编译,liveload等功能。gulp release
:发布命令,根据配置文件编译/压缩并生成,不处理html文件。gulp release -html
:带上html命令,会把html一并压缩。