作为一名前端开发,尤其是在做移动端适配时,rem是我们经常用到的单位,它的好处大家可以自行搜索,网上已经有很多了.但是我们再将设计稿上的px转换成rem时,得手动的去计算,这是一个很耗时.费力的过程,有没有什么办法可以"解放"我们呢?(原谅我的懒~) 1.CSS处理器 Sass.LESS以及PostCSS这样的处理器都可以处理. Sass(使用Sass的函数.混合宏这些功能来实现): @function px2em($px, $base-font-size: 16px) { @if (…

CSSREM CSSREM 是一个CSS的 px 值转 rem 值的Sublime Text3自动完成插件.先来看看插件的效果: 一个CSS的px值转rem值的Sublime Text 3自动完成插件. 安装 下载本项目,比如:git clone https://github.com/flashlizi/cssrem 进入packages目录:Sublime Text -> Preferences -> Browse Packages... 复制下载的cssrem目录到刚才的packges目录…

移动端适配一直都是个大问题,现在也出现了各种各样的解决方案,比如 rem, vw 百分比等,但是比较成熟的切比较容易编写的还是 rem,他是相对于根元素的 font-size 进行等比例计算的. 但是我们在编写css的时候,需要计算每一个元素相对于根元素的rem值是多少.会比较麻烦,并且维护起来也不方便.那么社区也出现了各种解决方案. 早期的解决方案是利用 sass 或者less编写函数进行自动转换.到后来淘宝的lib-flexible,再到现在的 postcss,都是为了编写的时候写的是px,…

cnpm i postcss-px2rem --save cnpm install px2rem-loader --save 2.配置px2rem build目录下vue-loader.conf.js中,做如下修改: module.exports = { loaders: utils.cssLoaders({ sourceMap: isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap, extract:…

该篇内容由个人博客点击跳转同步更新!转载请注明出处! 前言 ELK是什么 它是一个分布式日志解决方案,是Logstash.Elastaicsearch.Kibana的缩写,可用于从不同的服务中收集日志后进行处理和分析,通过Kibana可以全方面的展示收集后的信息,比如通过图表或者表格形式. 能用来做什么 (一)ELK组件在海量日志系统的运维中,可用于解决: 分布式日志数据集中式查询和管理 系统监控,包含系统硬件和应用各个组件的监控 故障排查 安全信息和事件管理 报表功能 (二)ELK组件在大数据…

MySQL 数据库的tab补全功能                      跟着步骤走~~ 懒人养成第一步 不仅帮你补全 甚至预判你的预判,就问你可怕不可怕 1.安装相关依赖软件(需要配置yum官方或者阿里源进行安装) yum -y install epel-release yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-dev…

一.首先介绍一下px px就是css中最基本的长度单位了,用px做单位基本上没什么问题,可以做到让页面按套路精确的展现! 可但是!但可是!如果全篇用px布局会暗藏一个蛋疼的问题,就是当用户和Ctrl滚页面的时候(说白了就是ctrl+,ctrl-),你会发现页面结构产生了不可预知的错乱,因此有砖家倡导使用em替代px..... 二.接下来介绍一下em 如果你从上到下阅读此文,你应该已经知道了em出现的原因,下面说说em的特性,简单的讲px是绝对单位,1px就是1px,2px就是2px,以此类推,而…

//designWidth:设计稿的实际宽度值,需要根据实际设置//maxWidth:制作稿的最大宽度值,需要根据实际设置//这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750);(function(designWidth, maxWidth) { var doc = document, win = window, docEl = doc.documentElement, remStyle = docume…

.安装 postcss-pxtorem : npm install postcss-pxtorem -D .修改 /build/utils.js 文件 找到 postcssLoader const postcssLoader = { loader: 'postcss-loader', options: { sourceMap: options.sourceMap } } 修改为: const postcssLoader = { loader: 'postcss-loader', options:…

1.自动填报 UI自动化 selenium 开发程序动机:天天有人催着填写问卷,弄的头大.主要还是懒的每天一个个去填写内容. 开发总时长:2个小时:学习+开发+修改 遇到的小问题: 在自动化填写地图的时候,这个高德地图输入地址后下面无法实时更新(自己的chrome问题). 解决方法: 获取重新定位的按钮,然后在确定地址(不是很精确) 源码分享: from selenium import webdriver import time import random def run(): #3 drive…

之前有不少小伙伴问松哥微人事项目(https://github.com/lenve/vhr)使用的 MyBatis 逆向工程在哪里?其实旧版微人事当时没有使用逆向工程,是我自己手动敲出来的,当然手动敲的工作量非常大. 今年发出来的新版微人事,我使用了逆向工程自动生成实体类和 dao 层的代码.MyBatis 的逆向工程要么需要添加依赖,要么需要自己去网上下载 jar,用起来还是有点麻烦,所以,今天和小伙伴们介绍一款 IntelliJ IDEA 上的免费开源插件,叫做 EasyCode,可以方便的…

在一个布局文件里.假设定义了非常多非常多id,代码中一个个findview是一件非常枯燥而且浪费时间的事情. 所以这里向大家推荐一个必备插件android layout id converter. 配置完毕后仅仅须要在xml文件右键点击Convert android layout xml,然后在你activity中仅仅须要粘贴,就能够帮助你自己主动生成代码.例如以下这些就是自己主动生成的: private WheelView wheelview; private ScrollView scrol…

一.简介 Lombok 是一种 Jav 构建工具,可用来帮助开发人员消除 Java 的冗长代码,尤其是对于简单的 Java 对象(POJO).它是通过注解实现这一目的. 二.使用 1.在idea中安装插件 file-->settings-->plugins,打开idea插件设置,在搜索框中输入lombok,下载并安装lombok,如下图所示: 2.导入lombok 的maven依赖(jar包) <!-- https://mvnrepository.com/artifact/org.pro…

hbuilder里面有自动换算的 需要设置一下:工具–>选项–>Hbuilder–>代码助手设置.里面有个px自动转rem设置,按自己的实际情况设置就可以在每次输入px的时候有提示了,sublime也有类似插件.…

注:不转换的px用大写PX代替 lib-flexible 作用:让网页根据设备dpr和宽度,利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备 安装:cnpm i lib-flexible --save 引入:入口文件main.js中:import 'lib-flexible/flexible' 安装:cnpm install px2rem-loader 配置px2rem-loader:在build文件中找到util.js,将px2rem-loader添…

一个CSS的px值转rem值的Sublime Text 3自己主动完毕插件. 插件效果例如以下: 安装 克隆项目   https://github.com/hyb628/cssrem.git 进入packages文件夹:Sublime Text -> Preferences -> Browse Packages... 复制下载的cssrem文件夹到刚才的packges文件夹里. 重新启动Sublime Text. 配置參数 參数配置文件:Sublime Text -> Preferenc…

css中px,em和rem的区别 今天,突然间发现一个特别有意思的问题,就是无意间看到一个网站中的em并不是16px,下面展开了对于px和em以及rem的探究. 首先,px是绝对长度单位,是相对于显示器屏幕分辨率而言的,而em.rem是相对长度单位,相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸.在国内,大部分网站是无法调整的,他们大部分是用的px做单位,国外的网站大多用em或rem作为单位字体,他们的网站的字体就容易调控. 然后针对单独的p…

在开发的过程中,我们为了节约时间,往往会将大量重复机械的代码封装,考虑代码的复用性,这样我们可以节约很多时间来做别的事情.最近跳槽到一节webform开发的公司,主要是开发自己公司用的ERP.开始因为一些诱惑进来的,现在感觉其实有些后悔放弃了很好的学习ABP以及新知识点像一些很新颖的前端框架进这个公司.但现在跳槽也不是一个明智之举,不好意思扯远了,既来之则安之.最近写了个小工具.主要针对webform开发过程中一些重复的代码处理. github地址:https://github.com/Jimm…

之前写了篇文章,懒人小工具:[自动生成Model,Insert,Select,Delete以及导出Excel的方法](http://www.jianshu.com/p/d5b11589174a),但是有人觉得这种方法很麻烦.其实我感觉确实是有点麻烦,麻烦在于字符串的拼接.      这种时候我想到了T4模板,用过EF的 DatabaseFirst自动生成实体的同学就明白,dbfirst 自带T4模板,之前我们在学习spring.net框架的时候,也有用过T4模板根据数映射到实体类自动创建仓储.T…

20171105 1211/星期日 公司为了更好适配手机端,以前用px做单位的css文件,全部需要转化为用rem做单位,目前是1rem=37.5px;开发新项目时,还是用习惯的px写样式代码,完成UI稿的还原后,再统一转化为用rem做单位,贴上我写的nodejs 代码: var fs = require('fs');var path=require('path'); console.log((__dirname))var oldContent='./px/';var newContent='./…

   懒人小工具2:T4自动生成Model,Insert,Select,Delete以及导出Excel的方法    github地址:https://github.com/Jimmey-Jiang/JWorkHelper 在开发的过程中,我们为了节约时间,往往会将大量重复机械的代码封装,考虑代码的复用性,这样我们可以节约很多时间来做别的事情.最近跳槽到一节webform开发的公司,主要是开发自己公司用的ERP.开始因为一些诱惑进来的,现在感觉其实有些后悔放弃了很好的学习ABP以及新知识点像一些很…

本人java菜鸟一名,若有错误,还请见谅. 1.px和em和rem的定义和区别 px:px像素,是相对单位,相对于屏幕的分辨率而言,也就是说,当屏幕的分辨率不同那么px相同,实际看到的大小也会不同. 例如:当一台手机的分辨率为1024*768来说,也就是说,这屏幕由纵向的1024个像素点和横向的768个像素点组成,所以当一个组件的width为200px的时候在这台手机上会占据200个横向的像素点:那么当同样大小的手机只有800*600的分辨率,那么该组件在同样的大小手机中也占据了200个横向像素…

动态显示目录的作用 不用每次写博客的时候繁琐的人工整理目录,又可以动态浮动在右下角,方便快速跳到感兴趣的位置同时也可以快速的对文章内容有一个大概的了解. 实现原理 首先根据个人喜好,我习惯了用 h1 来做分类.所以本篇内容也主要是针对h1来提取目录. 如何提取出来h1呢? 先来看这张图,以猎豹浏览器为例: 首先在博客内容第一行点击鼠标右键,然后选择检查.这时会弹出右边的框,直接定位到我的h1标签,就这么简单的找到了它的父级 cnblogs_post_body . 然后使用 jquery 选择器…

Vue将px转化为rem适配移动端 1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npm i lib-flexible --save 2.引入lib-flexible在main.js中引入lib-flexibleimport 'lib-flexible/flexible' 3.设置meta标签通过meta标签,设置设备宽度以及缩放比例<meta name="viewport" content="width=device…

前言   这篇安装教程的素材在国庆就准备好了,但那时学习任务比较重,没有时间发帖,一直拖到现在.趁这个周末有空,赶紧写完它,希望能帮助一些景友. 论坛已经有不少安装教程,如果对这篇安装教程有疑问可以去看看他们的,他们写得很不错.看到此贴有错误的地方,欢迎纠正. 在教程开始前,首先声明以下机油不适合安装黑苹果: 1,AMD的处理器 [内核原生不支持],如果非要安装请参考集合帖AMD相关教程 2,带intel 核显/集显的笔记本电脑,但不是HD3000或者HD4000. 3,显卡为A卡3系列及以下的…

网络上已经有很多适配教程,可是看了半天总是半懂不懂..最后还是要综合多个教程再动动脑子动动手,最好有程序大哥帮你试一下(这得有多大的福气) 如果有跟我一样情况的: 1.       有人说用sketch自动导出多套尺寸切图和SVG矢量格式,表示没钱买MAC 2.       有人说用切图神器cutman,表示用CC以上版本PS不支持 3.       另…不喜欢/用不惯/不会用ps自带切图工具的 目前iPhone有10种型号,5种屏幕尺寸,再加上6plus的“降采样”(Downsampling)…

用一种新的技术思维去群发邮件 一种不用换IP,不需要任何发件箱的邮件群发方式 一种不需要验证码,不需要**代码变量的邮件群发方式 即使需要验证码也能全自动识别验证码的超级智能软件 教你最核心的邮件群发思维和软件群发技术图片链接不是 问题50%~90%进入收件箱让你不再为进垃圾箱而发愁 每天群发100万封邮件不再是难题 懒人技术升级版大站协议邮件群发 提供的不仅仅是软件更重要的是群发技术 邮件群发神器简介:什么是懒人群发技术大站协议升级版? 懒人群发大站协议升级版,是通过签署邮件群发服务器协议的大…

请版主把我之前发的那个帖子删了!因为所有的图全部挂了,所以麻烦版主了…… 安装中出现五国的话就请进入这里看看是那里的错误http://bbs.pcbeta.com/viewthread-863656-1-1.html 引导篇:变色龙引导安装,推荐安装win变色龙,因为绝大部分人安装mac系统的时候,是没有Mac系统的用户,他们有的只是一个win系统,那么我就以这个情况来介绍,那么先安装变色龙,安装变色龙有几点需要注意!1.选择适合的版本(当然10.8需要选择svn2.1 19XX以上版本,如果是…

一直对px,pt,em,rem的认识有误区,现整理一下,供参考.之后还得整理下关于dpi相关的知识. px(pixe,像素l):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选.Windows系统默认是96dpi,Apple系统默认是72dpi.相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) px 特点: 1. IE无法调整那些使用px作为…

<script type="text/javascript"> var oHtml = document.documentElement; getSize(); window.onresize = function(){ getSize(); }; function getSize(){ var screenWidth = oHtml.clientWidth; if (screenWidth < 320) { oHtml.style.fontSize = '42.66…