- 大屏适配方案
木公176
前端数据可视化前端javascripthtml信息可视化
目录:1认识大屏设备2大屏适配方案3开发注意事项4大屏项目实一、大屏适配方案一(rem+fontsize)需要下载rem.js并且使用rem作为单位开发,可以通过vscode插件把px自动计算成rem1、没有使用适配的情况Documentbody,ul{margin:0;padding:0;}body{width:1920px;height:1080px;box-sizing:border-box
- 大屏自适应postcss-px2rem
哈0
1、安装postcss-px2remnpminstallpostcss-px2rempx2rem-loader--save2、在根目录src中新建util目录下新建rem.js等比适配文件ps:如果根目录src中未能找到util目录,那么你需要自己创建一个。代码://rem等比适配配置文件//基准大小constbaseSize=16;//设置rem函数functionsetRem(){//当前页面
- Vue项目里rem的使用
百思不得小李
vue2JS实战记录vue.jsjavascript前端vue
先在src下的libs文件夹下新建一个js文件,取名为rem.js,封装一个换算方法://此处的16跟上面的16对应,同样是倍数constbaseSize=16//设置根节点的font-size大小函数functionsetRem(){//375为设计稿页面宽度,如为750,把375改为750constscale=document.documentElement.clientWidth/1920/
- CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem:大屏高宽自适应问题
AvatarGiser
csspostcss前端
前言继上篇《CSS自适应分辨率amfe-flexible和postcss-pxtorem》。发现一个有趣的问题,文件rem.js中按照宽度设置自适应,适用于大多数页面,但当遇到大屏就不那么合适了。问题使用宽度,注意代码第2和4行://1920默认大小16px;1920px=120rem;每个元素px基础上/16constscreenWidth=1920constscale=screenWidth/
- px2rem插件在vue中的使用方法
起个名字那么难吗
Step1:导入rem计算公式;1.创建:在src目录下创建config文件夹并在目录下创建rem.js文件写入如下代码;(function(){functiona(){varb=document.documentElement.clientWidth;b=b>750?750:b;varc=b/750*100;document.getElementsByTagName("html")[0].sty
- html动态设置根字体大小(页面字体使用rem单位可根据屏幕大小自适应)
cjg520
html动态设置根字体大小(页面字体使用rem单位可根据屏幕大小自适应)1.新建rem.js文件(function(doc,win){letdocEl=doc.documentElement,resizeEvt='orientationchange'inwindow?'orientationchange':'resize',recalc=function(){letclientWidth=docE
- vue 项目中 使用rem布局
一染星辰
每日一面前端移动端
目录1安装postcss-px2rem及px2rem-loader2在根目录src中新建util目录下新建rem.js等比适配文件3在main.js中引入适配文件
- vue项目实现部分页面使用rem_vue 中使用rem布局
weixin_39816362
要想移动端适配并使用rem您需要先看这篇文章,配置好less➡️在vue中使用less,就可以使用rem了如果项目已经开发的差不多了,没有用到rem又要使用rem,您用这招。postcss-pxtorem:转换px为rem的插件安装postcss-pxtoremnpminstallpostcss-pxtorem--save新建rem.js文件constbaseSize=32//设置rem函数fun
- 【记录】vue中实现界面rem自适应
清风自徐来i
其他vue.jsjavascript前端
1.下包2.配置用到的是vue框架,webpack已经封装好了,需要在根目录新建文件具体内容//postcss.config.jsmodule.exports={presets:['@vue/cli-plugin-babel/preset']}3.根据屏幕变化调整比例//rem.js//基准大小constbaseSize=16;//设置rem函数functionsetRem(){//当前页面宽度相
- 移动端rem自适应处理办法,rem.js
漂亮假动作
//designWidth:设计稿的实际宽度值,需要根据实际设置//maxWidth:制作稿的最大宽度值,需要根据实际设置//这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750);(function(designWidth,maxWidth){vardoc=document,win=window,docEl=
- rem.js
月光也会跟着我
设置字体大小//基准大小constbaseSize=75;//设置rem函数functionsetRem(){//当前页面宽度相对于750宽的缩放比例,可根据自己需要修改。letscale=document.documentElement.clientWidth/375;if(window.orientation==180||window.orientation==0){scale=documen
- 使用postcss-pxtorem进行自适应
ssy001128
vue相关知识postcss前端javascript
目录一、下载插件二、在utils文件夹下新建rem.js文件三、在main.js中引入rem.js四、在根目录新建.postcssrc.js文件一、下载插件npmipostcss-pxtorem-S二、在utils文件夹下新建rem.js文件//跟.postcssrc.js里的rootValue的值是一致的constbaseSize=100//设置rem函数functionsetRem(){//当
- 使用postcss-pxtorem适配屏幕
你好左年
postcssjavascriptvue.js
1.使用yarn或npm下载postcss-pxtorem(版本5.1.1,太高版本会对相关依赖版本要求较高)2.在根目录新建postcss.config.js的配置文件3.写页面自适应脚本rem.js并全局引用4.相关文件//vue.config.jsmodule.exports={chainWebpack:config=>{config.plugin('html').tap(args=>{ar
- rem.js
1994陈
//设置跟元素字体大小,配合rem做屏幕适配```(function(doc,win){letdocEl=doc.documentElement;resizeEvt="orientationChange"inwindow?'orientationchange':'resize';recalc=function(){letclientWidth=docEl.clientWidth;if(!clien
- vue项目实现自适应屏幕分辨率
毛三仙
后台管理系统大屏vue.jsjavascript前端
npminstallpostcss-px2rempx2rem-loader--save在根目录src中新建utils目录下新建rem.js等比适配文件//rem等比适配配置文件//基准大小constbaseSize=16//设置rem函数functionsetRem(){//当前页面屏幕分辨率相对于1920宽的缩放比例,可根据自己需要修改constscale=document.documentEl
- rem布局以及rem自适应js
摇摇奶昔x
javascript前端html
一、rem概念rem(fontsizeoftherootelement)是指相对于根元素的字体大小的单位,简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(fontsizeoftheelement)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。二、rem.js//rem自动计算(function(doc,win){va
- 屏幕自适应单位rem、vw转换(移动端适配)
MoicA
1.使用rem的js代码解决适配问题事实上rem.js是把屏幕等分成10份,每份为1rem,1rem对应的大小就是rem基准值,rem.js做的就是把rem基准值给html的font-size,所以如果设备的物理像素宽为640px,那么1rem=640px/10=64px,html的font-size为16pxrem.js文件内容/*rem.js文件内容*/(function(){varhtml=
- nuxt.js使用rem自适应所有屏幕(PC端与手机端)
性野喜悲
vue经验分享nuxt.jsjavascript开发语言前端
在plugins新建rem.js(PC端)//隔离作用域,避免全局变量的污染!(function(){functionsetHtmlFontSize(){varwhdef=100/1920;//表示1920的设计图,使用100PX的默认值varbodyWidth=document.documentElement.getBoundingClientRect().width;//当前窗口的宽度cons
- vue-cli3 配置 postcss-pxtorem
vonson
个人项目中踩坑:使用lib-flexible配合postcss-pxtorem无法正常使用;postcss-pxtorem版本6.0.0太高导致报错问题;适配方案:postcss-pxtorem搭配rem.js文件,具体步骤如下。安装
[email protected]修改package.json文件"postcss":{"plugins":{"auto
- vue2.x 的移动端适配
无上星空
vue
- 移动端项目 - Rem自适应代码 -rem.js
正好80
每次做移动端项目,都要根据设计图规划和设计好项目rem和px换算比例。久而久之,找到一套rem自适应JS代码,只要把这段js代码最好封装在一个单独的js文件里,并且放在所有的css文件引入之前即可。rem.js代码如下://rem自适应代码一://能适用所有移动端h5页面的自适应需求-rem设置window.onload=function(){/*720代表设计师给的设计稿的宽度,你的设计稿是多少
- 计算rem.js
出大问题
(function(doc,win){console.log(doc,win)vardocEl=doc.documentElement,//console.log(docEl)resizeEvt='orientationchange'inwindow?'orientationchange':'resize',//mobilepW=750,//设计稿的宽度recalc=function(){varc
- 网页自适应 rem 浏览器窗口缩放内容错乱 禁止缩放 vue
枫林晚风起
vuevuerem自适应浏览器缩放
1.remrem都知道,是根据跟元素大小更改,所以我们一般会用这个来适用各种屏幕,毕竟是按照比例来的,还是挺不错的但是现在pc端ui设计一般都是1920X不确定高度,高度好说都是有多高就多高,宽度1920,多出的就是为了适用,一般主要内容是1200的宽度。在vue里搭建好之后就新建一个rem.js的文件夹,里面写上这样!function(n){ vare=n.document
- 手写H5/web loading效果和消息提示层
chizuige1125
前端javascriptViewUI
众所周知,在前端开发中,loading效果和消息提示层是经常用到的,当然这里有很多成熟的前端提示层插件,例如:layer这里我们自己动手写一下,话不多说,上代码:准备rem.js,用来将rem和px互转,代码如下:(function(doc,win){vardocEl=doc.documentElement,resizeEvt='onorientationchange'inwindow?'onor
- 移动端rem.js的使用方法
GUN1019
代码一:window.onload=function(){/*720代表设计师给的设计稿的宽度,你的设计稿是多少,就写多少;100代表换算比例,这里写100是为了以后好算,比如,你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/getRem(720,100)};window.onresize=function(){getRem(720,100)};function
- js 移动端px rem适配之rem.js
Micro同学
functionsetRem(){lethtmlWidth=document.documentElement.clientWidth||document.body.clientWidthlethtmlDom=document.getElementsByTagName('html')[0]htmlDom.style.fontSize=htmlWidth/20*8/3+'px'}setRem()win
- rem.js(自适应屏幕宽度算法)
山间清泉1111
使用rem算法(function(doc,win){vardocEl=doc.documentElement,resizeEvt='orientationchange'inwindow?'orientationchange':'resize',recalc=function(){varclientWidth=docEl.clientWidth;if(!clientWidth)return;docE
- 适配华为手机的rem.js
曹锦花
https://blog.csdn.net/weixin_46662539/article/details/109337973(function(doc,win){vardocEl=doc.documentElement,resizeEvt='orientationchange'inwindow?'orientationchange':'resize',recalc=function(){varc
- vue 如何PC端不同屏幕大小分辨率自适应
蓝爱人
PC端vue.jspostcss前端
需求:vue自适应屏幕分辨率PC端1、安装postcss-px2rem及px2rem-loadernpminstallpostcss-px2rempx2rem-loader--save2、在根目录src中新建utils目录下新建rem.js等比适配文件可直接复制以下代码//rem等比适配配置文件//基准大小constbaseSize=16//设置rem函数functionsetRem(){//当前
- rem.js
s2kzzZ
JavaScript
(function(win,lib){vardoc=win.document;vardocEl=doc.documentElement;varmetaEl=doc.querySelector('meta[name="viewport"]');varflexibleEl=doc.querySelector('meta[name="flexible"]');vardpr=0;varscale=0;va
- 安装数据库首次应用
Array_06
javaoraclesql
可是为什么再一次失败之后就变成直接跳过那个要求
enter full pathname of java.exe的界面
这个java.exe是你的Oracle 11g安装目录中例如:【F:\app\chen\product\11.2.0\dbhome_1\jdk\jre\bin】下的java.exe 。不是你的电脑安装的java jdk下的java.exe!
注意第一次,使用SQL D
- Weblogic Server Console密码修改和遗忘解决方法
bijian1013
Welogic
在工作中一同事将Weblogic的console的密码忘记了,通过网上查询资料解决,实践整理了一下。
一.修改Console密码
打开weblogic控制台,安全领域 --> myrealm -->&n
- IllegalStateException: Cannot forward a response that is already committed
Cwind
javaServlets
对于初学者来说,一个常见的误解是:当调用 forward() 或者 sendRedirect() 时控制流将会自动跳出原函数。标题所示错误通常是基于此误解而引起的。 示例代码:
protected void doPost() {
if (someCondition) {
sendRedirect();
}
forward(); // Thi
- 基于流的装饰设计模式
木zi_鸣
设计模式
当想要对已有类的对象进行功能增强时,可以定义一个类,将已有对象传入,基于已有的功能,并提供加强功能。
自定义的类成为装饰类
模仿BufferedReader,对Reader进行包装,体现装饰设计模式
装饰类通常会通过构造方法接受被装饰的对象,并基于被装饰的对象功能,提供更强的功能。
装饰模式比继承灵活,避免继承臃肿,降低了类与类之间的关系
装饰类因为增强已有对象,具备的功能该
- Linux中的uniq命令
被触发
linux
Linux命令uniq的作用是过滤重复部分显示文件内容,这个命令读取输入文件,并比较相邻的行。在正常情 况下,第二个及以后更多个重复行将被删去,行比较是根据所用字符集的排序序列进行的。该命令加工后的结果写到输出文件中。输入文件和输出文件必须不同。如 果输入文件用“- ”表示,则从标准输入读取。
AD:
uniq [选项] 文件
说明:这个命令读取输入文件,并比较相邻的行。在正常情况下,第二个
- 正则表达式Pattern
肆无忌惮_
Pattern
正则表达式是符合一定规则的表达式,用来专门操作字符串,对字符创进行匹配,切割,替换,获取。
例如,我们需要对QQ号码格式进行检验
规则是长度6~12位 不能0开头 只能是数字,我们可以一位一位进行比较,利用parseLong进行判断,或者是用正则表达式来匹配[1-9][0-9]{4,14} 或者 [1-9]\d{4,14}
&nbs
- Oracle高级查询之OVER (PARTITION BY ..)
知了ing
oraclesql
一、rank()/dense_rank() over(partition by ...order by ...)
现在客户有这样一个需求,查询每个部门工资最高的雇员的信息,相信有一定oracle应用知识的同学都能写出下面的SQL语句:
select e.ename, e.job, e.sal, e.deptno
from scott.emp e,
(se
- Python调试
矮蛋蛋
pythonpdb
原文地址:
http://blog.csdn.net/xuyuefei1988/article/details/19399137
1、下面网上收罗的资料初学者应该够用了,但对比IBM的Python 代码调试技巧:
IBM:包括 pdb 模块、利用 PyDev 和 Eclipse 集成进行调试、PyCharm 以及 Debug 日志进行调试:
http://www.ibm.com/d
- webservice传递自定义对象时函数为空,以及boolean不对应的问题
alleni123
webservice
今天在客户端调用方法
NodeStatus status=iservice.getNodeStatus().
结果NodeStatus的属性都是null。
进行debug之后,发现服务器端返回的确实是有值的对象。
后来发现原来是因为在客户端,NodeStatus的setter全部被我删除了。
本来是因为逻辑上不需要在客户端使用setter, 结果改了之后竟然不能获取带属性值的
- java如何干掉指针,又如何巧妙的通过引用来操作指针————>说的就是java指针
百合不是茶
C语言的强大在于可以直接操作指针的地址,通过改变指针的地址指向来达到更改地址的目的,又是由于c语言的指针过于强大,初学者很难掌握, java的出现解决了c,c++中指针的问题 java将指针封装在底层,开发人员是不能够去操作指针的地址,但是可以通过引用来间接的操作:
定义一个指针p来指向a的地址(&是地址符号):
- Eclipse打不开,提示“An error has occurred.See the log file ***/.log”
bijian1013
eclipse
打开eclipse工作目录的\.metadata\.log文件,发现如下错误:
!ENTRY org.eclipse.osgi 4 0 2012-09-10 09:28:57.139
!MESSAGE Application error
!STACK 1
java.lang.NoClassDefFoundError: org/eclipse/core/resources/IContai
- spring aop实例annotation方法实现
bijian1013
javaspringAOPannotation
在spring aop实例中我们通过配置xml文件来实现AOP,这里学习使用annotation来实现,使用annotation其实就是指明具体的aspect,pointcut和advice。1.申明一个切面(用一个类来实现)在这个切面里,包括了advice和pointcut
AdviceMethods.jav
- [Velocity一]Velocity语法基础入门
bit1129
velocity
用户和开发人员参考文档
http://velocity.apache.org/engine/releases/velocity-1.7/developer-guide.html
注释
1.行级注释##
2.多行注释#* *#
变量定义
使用$开头的字符串是变量定义,例如$var1, $var2,
赋值
使用#set为变量赋值,例
- 【Kafka十一】关于Kafka的副本管理
bit1129
kafka
1. 关于request.required.acks
request.required.acks控制者Producer写请求的什么时候可以确认写成功,默认是0,
0表示即不进行确认即返回。
1表示Leader写成功即返回,此时还没有进行写数据同步到其它Follower Partition中
-1表示根据指定的最少Partition确认后才返回,这个在
Th
- lua统计nginx内部变量数据
ronin47
lua nginx 统计
server {
listen 80;
server_name photo.domain.com;
location /{set $str $uri;
content_by_lua '
local url = ngx.var.uri
local res = ngx.location.capture(
- java-11.二叉树中节点的最大距离
bylijinnan
java
import java.util.ArrayList;
import java.util.List;
public class MaxLenInBinTree {
/*
a. 1
/ \
2 3
/ \ / \
4 5 6 7
max=4 pass "root"
- Netty源码学习-ReadTimeoutHandler
bylijinnan
javanetty
ReadTimeoutHandler的实现思路:
开启一个定时任务,如果在指定时间内没有接收到消息,则抛出ReadTimeoutException
这个异常的捕获,在开发中,交给跟在ReadTimeoutHandler后面的ChannelHandler,例如
private final ChannelHandler timeoutHandler =
new ReadTim
- jquery验证上传文件样式及大小(好用)
cngolon
文件上传jquery验证
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery1.8/jquery-1.8.0.
- 浏览器兼容【转】
cuishikuan
css浏览器IE
浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同
问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
碰到频率:100%
解决方案:CSS里 *{margin:0;padding:0;}
备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设
- Shell特殊变量:Shell $0, $#, $*, $@, $?, $$和命令行参数
daizj
shell$#$?特殊变量
前面已经讲到,变量名只能包含数字、字母和下划线,因为某些包含其他字符的变量有特殊含义,这样的变量被称为特殊变量。例如,$ 表示当前Shell进程的ID,即pid,看下面的代码:
$echo $$
运行结果
29949
特殊变量列表 变量 含义 $0 当前脚本的文件名 $n 传递给脚本或函数的参数。n 是一个数字,表示第几个参数。例如,第一个
- 程序设计KISS 原则-------KEEP IT SIMPLE, STUPID!
dcj3sjt126com
unix
翻到一本书,讲到编程一般原则是kiss:Keep It Simple, Stupid.对这个原则深有体会,其实不仅编程如此,而且系统架构也是如此。
KEEP IT SIMPLE, STUPID! 编写只做一件事情,并且要做好的程序;编写可以在一起工作的程序,编写处理文本流的程序,因为这是通用的接口。这就是UNIX哲学.所有的哲学真 正的浓缩为一个铁一样的定律,高明的工程师的神圣的“KISS 原
- android Activity间List传值
dcj3sjt126com
Activity
第一个Activity:
import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import a
- tomcat 设置java虚拟机内存
eksliang
tomcat 内存设置
转载请出自出处:http://eksliang.iteye.com/blog/2117772
http://eksliang.iteye.com/
常见的内存溢出有以下两种:
java.lang.OutOfMemoryError: PermGen space
java.lang.OutOfMemoryError: Java heap space
------------
- Android 数据库事务处理
gqdy365
android
使用SQLiteDatabase的beginTransaction()方法可以开启一个事务,程序执行到endTransaction() 方法时会检查事务的标志是否为成功,如果程序执行到endTransaction()之前调用了setTransactionSuccessful() 方法设置事务的标志为成功则提交事务,如果没有调用setTransactionSuccessful() 方法则回滚事务。事
- Java 打开浏览器
hw1287789687
打开网址open浏览器open browser打开url打开浏览器
使用java 语言如何打开浏览器呢?
我们先研究下在cmd窗口中,如何打开网址
使用IE 打开
D:\software\bin>cmd /c start iexplore http://hw1287789687.iteye.com/blog/2153709
使用火狐打开
D:\software\bin>cmd /c start firefox http://hw1287789
- ReplaceGoogleCDN:将 Google CDN 替换为国内的 Chrome 插件
justjavac
chromeGooglegoogle apichrome插件
Chrome Web Store 安装地址: https://chrome.google.com/webstore/detail/replace-google-cdn/kpampjmfiopfpkkepbllemkibefkiice
由于众所周知的原因,只需替换一个域名就可以继续使用Google提供的前端公共库了。 同样,通过script标记引用这些资源,让网站访问速度瞬间提速吧
- 进程VS.线程
m635674608
线程
资料来源:
http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/001397567993007df355a3394da48f0bf14960f0c78753f000 1、Apache最早就是采用多进程模式 2、IIS服务器默认采用多线程模式 3、多进程优缺点 优点:
多进程模式最大
- Linux下安装MemCached
字符串
memcached
前提准备:1. MemCached目前最新版本为:1.4.22,可以从官网下载到。2. MemCached依赖libevent,因此在安装MemCached之前需要先安装libevent。2.1 运行下面命令,查看系统是否已安装libevent。[root@SecurityCheck ~]# rpm -qa|grep libevent libevent-headers-1.4.13-4.el6.n
- java设计模式之--jdk动态代理(实现aop编程)
Supanccy2013
javaDAO设计模式AOP
与静态代理类对照的是动态代理类,动态代理类的字节码在程序运行时由Java反射机制动态生成,无需程序员手工编写它的源代码。动态代理类不仅简化了编程工作,而且提高了软件系统的可扩展性,因为Java 反射机制可以生成任意类型的动态代理类。java.lang.reflect 包中的Proxy类和InvocationHandler 接口提供了生成动态代理类的能力。
&
- Spring 4.2新特性-对java8默认方法(default method)定义Bean的支持
wiselyman
spring 4
2.1 默认方法(default method)
java8引入了一个default medthod;
用来扩展已有的接口,在对已有接口的使用不产生任何影响的情况下,添加扩展
使用default关键字
Spring 4.2支持加载在默认方法里声明的bean
2.2
将要被声明成bean的类
public class DemoService {