px-rem自适应转换(进阶@rem:40rem; )
接力之前的文章
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; )的更多相关文章
- 手机端页面自适应解决方案—rem布局(进阶版,附源码示例)
转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...
- css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...
- 移动端适配方案以及rem和px之间的转换
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- javascript中常见的函数封装 :判断是否是手机,判断是否是微信,获取url地址?后面的具体参数值,毫秒格式化时间,手机端px、rem尺寸转换等
// 判断是否是手机function plat_is_mobile(){ var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad ...
- 自动把网页px单位转换成rem
自动把网页px单位转换成rem 首先在你的项目开发环境中安装2个插件 然后在vue.config.js文件引入并重新启动服务器 这样就配置成功了,一起看看效果
- rem自适应布局的回顾总结
使用rem实现自适应布局,应该算是当前移动前端的一大趋势,有些人对此还有点迷惑,搞不懂rem是如何实现自适应布局,如何根据设计稿来调整rem的值?rem布局如何用雪碧背景图片?rem一定要加载JS吗? ...
- 【转载】rem自适应布局-移动端自适应必备
原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...
- rem自适应js
Rem自适应js---flexible.min.js 网上看到很多移动端适配的各种方法,由于原来工作中对rem的疏忽,所以决定重新学习rem~ 由于移动端特殊性,本文讲的是如何使用rem实现自适应 ...
- 【转】rem自适应布局
rem自适应原理 rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现了自适应布局.更多介绍请看这篇文章:rem是 ...
随机推荐
- 杭电OJ(HDU)-ACMSteps-Chapter Three-《FatMouse' Trade》《今年暑假不AC》《排名》《开门人和关门人》
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2Fpc2luaV92Yw==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- mybatis相关
1 namespace dao中使用namespace+id一起来完成对mapper中sql statement的调用. 2 关于resultMap和parameterType parameterTy ...
- StackOverflow&&Quora&&More 翻译系列——目录
启动了一个翻译系列,主要收录个人在伯乐在线上翻译的文章,或者在 StackOverflow.Quora 及其他资讯站上发现的好文,选文比较偏个人喜好.希望能够学习.理解文章的同时提高英语水平,并共享知 ...
- 给MDI窗体加背景,解释MakeObjectInstance和CallWindowProc的用法
工程含有1个MDI主窗口和2个子窗口.唯一需要注意的是,每个窗体都有ClientHandle,但只有当自己是MDI主窗体的情况下才有值,否则等于0. unit Unit1; interface use ...
- PHP环境变量归纳(转自网络)
PHP环境变量主要有$GLOBALS[].$_SERVER[].$_GET[].$_POST[].$_COOKIE[].$_FILES[].$_ENV[].$_REQUEST[].$_SESSION[ ...
- 使用微软官方U盘制作软件来安装纯净版windows
第一步:下载一个制作U启的工具;windows-usb-dvd-download-tool 微软官网:https://www.microsoft.com/en-us/download/windows- ...
- require.js vs browserify
require.js vs browserify require.js是模块加载器:browserify是预编译工具 require.js遵循的是AMD规范:browserify遵循的是CommonJ ...
- 微信小程序高度设置为100%
在网页中设置body,html{height:100%}; 将body和html设置为100%,这样我们就可以在他们的子元素中使用height:100%来使的我们的容器元素占满屏幕的高度啦. 但是在微 ...
- [原创]java WEB学习笔记41:简单标签之带属性的自定义标签(输出指定文件,计算并输出两个数的最大值 demo)
本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...
- [原创]关于设置linux中vim 显示行号
1.更改所有账户配置 直接更改/etc/vimrc vim /etc/vimrc 在vimrc文件的最后添加 set nu 即可 wq退出. 这样,不论使用哪个账号登陆,vim打开后都显示行号 2.为 ...