接力之前的文章

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. 杭电OJ(HDU)-ACMSteps-Chapter Three-《FatMouse&#39; Trade》《今年暑假不AC》《排名》《开门人和关门人》

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2Fpc2luaV92Yw==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  2. mybatis相关

    1 namespace dao中使用namespace+id一起来完成对mapper中sql statement的调用. 2 关于resultMap和parameterType parameterTy ...

  3. StackOverflow&&Quora&&More 翻译系列——目录

    启动了一个翻译系列,主要收录个人在伯乐在线上翻译的文章,或者在 StackOverflow.Quora 及其他资讯站上发现的好文,选文比较偏个人喜好.希望能够学习.理解文章的同时提高英语水平,并共享知 ...

  4. 给MDI窗体加背景,解释MakeObjectInstance和CallWindowProc的用法

    工程含有1个MDI主窗口和2个子窗口.唯一需要注意的是,每个窗体都有ClientHandle,但只有当自己是MDI主窗体的情况下才有值,否则等于0. unit Unit1; interface use ...

  5. PHP环境变量归纳(转自网络)

    PHP环境变量主要有$GLOBALS[].$_SERVER[].$_GET[].$_POST[].$_COOKIE[].$_FILES[].$_ENV[].$_REQUEST[].$_SESSION[ ...

  6. 使用微软官方U盘制作软件来安装纯净版windows

    第一步:下载一个制作U启的工具;windows-usb-dvd-download-tool 微软官网:https://www.microsoft.com/en-us/download/windows- ...

  7. require.js vs browserify

    require.js vs browserify require.js是模块加载器:browserify是预编译工具 require.js遵循的是AMD规范:browserify遵循的是CommonJ ...

  8. 微信小程序高度设置为100%

    在网页中设置body,html{height:100%}; 将body和html设置为100%,这样我们就可以在他们的子元素中使用height:100%来使的我们的容器元素占满屏幕的高度啦. 但是在微 ...

  9. [原创]java WEB学习笔记41:简单标签之带属性的自定义标签(输出指定文件,计算并输出两个数的最大值 demo)

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  10. [原创]关于设置linux中vim 显示行号

    1.更改所有账户配置 直接更改/etc/vimrc vim /etc/vimrc 在vimrc文件的最后添加 set nu 即可 wq退出. 这样,不论使用哪个账号登陆,vim打开后都显示行号 2.为 ...