rem布局配合less的快速开发

最近在进行静态页面的制作，为了方便和快速的布局，自己整理了一套工具可以快速的进行工作，剩余的时间大家都懂的，话不多说，来看具体的东西吧！

1、ps

　　下载这个软件→cutterman 十分强大的切图功能，主要是最近的页面不规则图形实在是太多，自己写的话又浪费时间，就在网上找了一个这个软件，附带地址http://www.cutterman.cn/zh/cutterman

注意：这个软件在安装的时候有点乱，所以要耐心看网站的介绍，一步一步来

2、页面搭建结构

a、头部的三个mate标签不用介绍了，手机app、webapp开发必须要有

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxinum-scale=1.0, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="http://m.aicaicdn.com/wap5/styles/common/rem-base.css">

b、引入js代码控制页面自适应

<script type="text/javascript">
(function(win,doc){
　　function change(){
　　　　doc.documentElement.style.fontSize=50*doc.documentElement.clientWidth/375+'px';
　　}
　　　　change();
　　　　win.addEventListener=('resize',change,false);
　　})(window,document)
</script>

重点关照那个375的数字，根据设计稿，如果是750的设计，直接px值直接除以100，就可以直接得出rem的数值。如果，但是，你们的设计稿不是根据375来设计的，那就要变动一下了，比如320和414等这些倍数来设计，只要改375就可以了。这样一来，每次测量的px值除以100就可以换算成rem值了。

下边的是配合less来做

这样会有一个问题，就是每次都去计算，虽然是除以100，但是有时候也不想动手，怎么办？那就要用到less了

3、在sublime3下安装less（这个不需要解释）

　　a、安装（less文件高亮显示安装：ctrl+shift+p>install Package>输入less2css按Enter）
　　b、安装nodejs
　　c、全局安装less npm install -g less
　　d、安装less自动编译插件 npm install less-plugin-clean-css

上边四部的安装都是比较傻瓜式的安装没什么要注意的，主要是node的安装，安装完之后记得验证，打开cmd →输入node -v

然后就是用less和rem来做了！！！！！！！

用法：

　　1、新建.less结尾的文件

　　2、设置变量@r:100rem;
　　3、测量出的px结果 /@r　　eg：width：100/@r
　　4、保存自动编译出css文件

　　当然文件一定要记住，编译出的css文件要在你的页面投入引入这个css文件的

好了，如果有什么不清楚的可以直接和我联系