接力之前的文章

https://www.cnblogs.com/leshao/p/5674710.html

这篇文章讲解的是px -rem 单位换算 除100的  写法

比如实际测量PSD宽度是500px,则 心算 500/100=5  。写 5rem

经过后续项目的改版,不同设计师,不同的风格,不同的单位大小。往往需要我们重新修改项目里面的单位大小,比如字体大小,宽度,高度等

现在经过改良实现了这样一种方法

配置一段rem.js,在所需的页面引入即可

=================================================================

//基本设置(像素比、Html字体大小)
(function (doc, win) {
  var set={
    setRem:function (ImgW,ImgM){//设置字体大小(默认20px,640的2倍图)
    ImgM=ImgM || 2;
    ImgW=(ImgW || 640)/ImgM;
    var setHtmlSize=function (){
    var oHtml = doc.getElementsByTagName('html')[0];
    oHtml.style.fontSize =20*oHtml.clientWidth / ImgW +"px";
  };
  var resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize';
    if( !doc.addEventListener) return;
    win.addEventListener(resizeEvt, setHtmlSize, false);
  doc.addEventListener('DOMContentLoaded',setHtmlSize, false);
    }
  }
  set.setRem(750,2);//设置字体大小
  })(document, window);

==================================================================

引用js/rem.js,配置好了,2倍数图,这个时候,我们需要打开考拉,引入less

less文件夹里面设置 @rem:40rem;

当测量PSD里面的width height时候,直接是说多少,就除以@rem

打开考拉"koala",引入这些文件夹

比如测量是100px 200px 宽高。则这样写 width:100/@rem height:100/@rem即可

==========================

总结一句话,配置好rem.js之后,页面引用,使用考拉,style.less里面写好@rem:40rem;

接下来直接 x/@rem

这样做的好处是,当某天项目改版,更换宽高,则我们,可以直接修改 @rem:40rem.这个比例,即可整体替换生效

=========================================

参考下载链接地址:https://files.cnblogs.com/files/leshao/%E7%A7%BB%E5%8A%A8%E7%AB%AFrem.rar

demo实例:https://files.cnblogs.com/files/leshao/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91rem.rar

纯作为工作备忘录而已 不作为硬通货

px-rem自适应转换(进阶@rem:40rem; )的更多相关文章

  1. 手机端页面自适应解决方案—rem布局(进阶版,附源码示例)

    转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...

  2. css大小单位px em rem的转换和详解

    css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...

  3. 移动端适配方案以及rem和px之间的转换

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  4. javascript中常见的函数封装 :判断是否是手机,判断是否是微信,获取url地址?后面的具体参数值,毫秒格式化时间,手机端px、rem尺寸转换等

    // 判断是否是手机function plat_is_mobile(){ var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad ...

  5. 自动把网页px单位转换成rem

    自动把网页px单位转换成rem 首先在你的项目开发环境中安装2个插件 然后在vue.config.js文件引入并重新启动服务器 这样就配置成功了,一起看看效果

  6. rem自适应布局的回顾总结

    使用rem实现自适应布局,应该算是当前移动前端的一大趋势,有些人对此还有点迷惑,搞不懂rem是如何实现自适应布局,如何根据设计稿来调整rem的值?rem布局如何用雪碧背景图片?rem一定要加载JS吗? ...

  7. 【转载】rem自适应布局-移动端自适应必备

    原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...

  8. rem自适应js

    Rem自适应js---flexible.min.js   网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用rem实现自适应 ...

  9. 【转】rem自适应布局

    rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...

随机推荐

  1. 《C++游戏开发》笔记十一 平滑动画:不再颤抖的小雪花

    本系列文章由七十一雾央编写,转载请注明出处.  http://blog.csdn.net/u011371356/article/details/9430645 作者:七十一雾央 新浪微博:http:/ ...

  2. MySQL 数据库事物隔离级别的设置

    select @@tx_isolation; //查看隔离级别 set session transaction isolation level read uncommitted; //设置读未提交级别 ...

  3. WCF基础之承载服务和生成客户端

    wcf的承载有三种iis.was和自承载,它们如何承载园子里有很多,就不多赘述. 自iis7以后iis支持http和非http的协议,使用iis承载服务与其他两种承载相比,我觉的最明显的是was和自承 ...

  4. 怎样查看电脑登录过的wifi密码?

    https://jingyan.baidu.com/album/fcb5aff770f7e6edaa4a71d9.html?picindex=7

  5. 监控httpd的shell脚本

    #!/bin/bash # Apache httpd进程监控shell # 如果你在使用RHEL / CentOS / Fedora Linux,使用这个重启命令 RESTART="/sbi ...

  6. lua的弱弱引用表

    lua有GC.细节无需太关注.知道些主要的即可,能local就一定不要global: 还有在数组里的对象,除非显式=nil,否则非常难回收: 只是能够用弱引用表来告诉GC. 外部引用为0,就不要管我, ...

  7. easyui的 一些经验

    1. 渲染网络表格时,行操作 <th field="sort_num" width="10" data-options="field:'id', ...

  8. CONVERT_DATE_INPUT

    [转自http://www.cnblogs.com/VerySky/articles/2226862.html] 通过 Function Module 将外部日期转换为内部日期所属 Function ...

  9. error in static/js/xxx.js from UglifyJs Unpected token: punc() [static/js/xxx.js]

    出现问题 使用vue+element-ui+webpack开发项目时,Jenkins构建出现报错error in static/js/xxx.js from UglifyJs Unpected tok ...

  10. VC2010编译时提示:转换到 COFF 期间失败: 文件无效或损坏

    有时候新安装好VS2010后编译时就提示上述错误,罗列一下从网上查找到的几种解决方案: 方案1: 点击“项目”-->“属性”--> “清单工具”, 然后选择"输入和输出’--&g ...