rem布局配合less的快速开发-白红宇

rem布局配合less的快速开发

阅读量：6163 次

发布时间：2019-06-21

本文共 1499 字，大约阅读时间需要 4 分钟。

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

1、ps

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

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

2、页面搭建结构

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

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

(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文件的

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

转载于:https://www.cnblogs.com/somejs/p/7767050.html

你可能感兴趣的文章