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是 ...
随机推荐
- python爬虫学习研究
目标:做一个小爬虫项目 2017年6月4日13:32:17 mooc网教程Python爬虫入门一之综述要学习Python爬虫,我们要学习的共有以下几点:Python基础知识Python中u ...
- c语言三元组
// Triplet.cpp : 定义控制台应用程序的入口点.//#include "stdio.h"#include "stdlib.h"#define OK ...
- 九度OJ 1341:艾薇儿的演唱会 (最短路)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:528 解决:241 题目描述: 艾薇儿今天来到了中国,她计划两天后在哈尔滨举行一场个人的演唱会.由于出现了紧急情况,演唱会的举办方要求艾薇儿 ...
- linux c编程:线程创建
前面章节中介绍了进程.从这一章开始介绍线程.进程和线程的差别是什么呢: 进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,进程是系统进行资源分配和调度的一个独立单位. 线程是进程的一个实 ...
- 【Android】开源项目汇总
Android开源项目第一篇——个性化控件(View)篇 包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.Progres ...
- linux 5-sort,uniq,tar,split
十二. 行的排序命令sort: 1. sort命令行选项: 选项 描述 -t 字段之间的分隔符 -f 基于字符排序时忽略大小写 -k 定义排序的域字段,或者是基于域字段的部分数据进行排序 - ...
- 4django模板
在前面的几节中我们都是用简单的django.http.HttpResponse来把内容显示到网页上,本节将讲解如何使用渲染模板的方法来显示内容 1.创建一个 zqxt_tmpl 项目,和一个 名称为 ...
- Android TableLayout 表格布局
TableLayout继承LinearLayout 有多少个TableRow对象就有多少行, 列数等于最多子控件的TableRow的列数 直接在TableLayout加控件,控件会占据一行 Table ...
- 每天一个Linux命令(20)find命令_exec参数
find命令的exec参数,用于find查找命令完成以后的后续操作. (1)用法: 用法: [find命令] [-exec 其他命令 {} \;] (2)功能: 功能:-exec ...
- [原创] hadoop学习笔记:wordcout程序实践
看了官网上的示例:但是给的不是很清楚,这里依托官网给出的示例,加上自己的实践,解析worcount程序的操作 1.首先你的确定你的集群正确安装,并且启动你的集群,应为这个是hadoop2.6.0,所以 ...