- 在 Vue 3 项目配置 rem
htmlvue3rem
在Vue3中配置rem时,设计稿1920,如果你希望实现一个最小宽度为1024px的适配,意思是当屏幕宽度小于1024px时不再缩小字体大小,始终保持最小宽度的rem配置。可以通过动态设置根元素的字体大小来实现。一、安装插件pnpminstallamfe-flexible--save二、自定义方法根目录新建utils/rem.js文件(function(){constbaseWidth=1920;
- 大屏适配方案
木公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(){//当前
- ztree异步加载
3213213333332132
JavaScriptAjaxjsonWebztree
相信新手用ztree的时候,对异步加载会有些困惑,我开始的时候也是看了API花了些时间才搞定了异步加载,在这里分享给大家。
我后台代码生成的是json格式的数据,数据大家按各自的需求生成,这里只给出前端的代码。
设置setting,这里只关注async属性的配置
var setting = {
//异步加载配置
- thirft rpc 具体调用流程
BlueSkator
中间件rpcthrift
Thrift调用过程中,Thrift客户端和服务器之间主要用到传输层类、协议层类和处理类三个主要的核心类,这三个类的相互协作共同完成rpc的整个调用过程。在调用过程中将按照以下顺序进行协同工作:
(1) 将客户端程序调用的函数名和参数传递给协议层(TProtocol),协议
- 异或运算推导, 交换数据
dcj3sjt126com
PHP异或^
/*
* 5 0101
* 9 1010
*
* 5 ^ 5
* 0101
* 0101
* -----
* 0000
* 得出第一个规律: 相同的数进行异或, 结果是0
*
* 9 ^ 5 ^ 6
* 1010
* 0101
* ----
* 1111
*
* 1111
* 0110
* ----
* 1001
- 事件源对象
周华华
JavaScript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml&q
- MySql配置及相关命令
g21121
mysql
MySQL安装完毕后我们需要对它进行一些设置及性能优化,主要包括字符集设置,启动设置,连接优化,表优化,分区优化等等。
一 修改MySQL密码及用户
 
- [简单]poi删除excel 2007超链接
53873039oycg
Excel
采用解析sheet.xml方式删除超链接,缺点是要打开文件2次,代码如下:
public void removeExcel2007AllHyperLink(String filePath) throws Exception {
OPCPackage ocPkg = OPCPac
- Struts2添加 open flash chart
云端月影
准备以下开源项目:
1. Struts 2.1.6
2. Open Flash Chart 2 Version 2 Lug Wyrm Charmer (28th, July 2009)
3. jofc2,这东西不知道是没做好还是什么意思,好像和ofc2不怎么匹配,最好下源码,有什么问题直接改。
4. log4j
用eclipse新建动态网站,取名OFC2Demo,将Struts2 l
- spring包详解
aijuans
spring
下载的spring包中文件及各种包众多,在项目中往往只有部分是我们必须的,如果不清楚什么时候需要什么包的话,看看下面就知道了。 aspectj目录下是在Spring框架下使用aspectj的源代码和测试程序文件。Aspectj是java最早的提供AOP的应用框架。 dist 目录下是Spring 的发布包,关于发布包下面会详细进行说明。 docs&nb
- 网站推广之seo概念
antonyup_2006
算法Web应用服务器搜索引擎Google
持续开发一年多的b2c网站终于在08年10月23日上线了。作为开发人员的我在修改bug的同时,准备了解下网站的推广分析策略。
所谓网站推广,目的在于让尽可能多的潜在用户了解并访问网站,通过网站获得有关产品和服务等信息,为最终形成购买决策提供支持。
网站推广策略有很多,seo,email,adv
- 单例模式,sql注入,序列
百合不是茶
单例模式序列sql注入预编译
序列在前面写过有关的博客,也有过总结,但是今天在做一个JDBC操作数据库的相关内容时 需要使用序列创建一个自增长的字段 居然不会了,所以将序列写在本篇的前面
1,序列是一个保存数据连续的增长的一种方式;
序列的创建;
CREATE SEQUENCE seq_pro
2 INCREMENT BY 1 -- 每次加几个
3
- Mockito单元测试实例
bijian1013
单元测试mockito
Mockito单元测试实例:
public class SettingServiceTest {
private List<PersonDTO> personList = new ArrayList<PersonDTO>();
@InjectMocks
private SettingPojoService settin
- 精通Oracle10编程SQL(9)使用游标
bijian1013
oracle数据库plsql
/*
*使用游标
*/
--显示游标
--在显式游标中使用FETCH...INTO语句
DECLARE
CURSOR emp_cursor is
select ename,sal from emp where deptno=1;
v_ename emp.ename%TYPE;
v_sal emp.sal%TYPE;
begin
ope
- 【Java语言】动态代理
bit1129
java语言
JDK接口动态代理
JDK自带的动态代理通过动态的根据接口生成字节码(实现接口的一个具体类)的方式,为接口的实现类提供代理。被代理的对象和代理对象通过InvocationHandler建立关联
package com.tom;
import com.tom.model.User;
import com.tom.service.IUserService;
- Java通信之URL通信基础
白糖_
javajdkwebservice网络协议ITeye
java对网络通信以及提供了比较全面的jdk支持,java.net包能让程序员直接在程序中实现网络通信。
在技术日新月异的现在,我们能通过很多方式实现数据通信,比如webservice、url通信、socket通信等等,今天简单介绍下URL通信。
学习准备:建议首先学习java的IO基础知识
URL是统一资源定位器的简写,URL可以访问Internet和www,可以通过url
- 博弈Java讲义 - Java线程同步 (1)
boyitech
java多线程同步锁
在并发编程中经常会碰到多个执行线程共享资源的问题。例如多个线程同时读写文件,共用数据库连接,全局的计数器等。如果不处理好多线程之间的同步问题很容易引起状态不一致或者其他的错误。
同步不仅可以阻止一个线程看到对象处于不一致的状态,它还可以保证进入同步方法或者块的每个线程,都看到由同一锁保护的之前所有的修改结果。处理同步的关键就是要正确的识别临界条件(cri
- java-给定字符串,删除开始和结尾处的空格,并将中间的多个连续的空格合并成一个。
bylijinnan
java
public class DeleteExtraSpace {
/**
* 题目:给定字符串,删除开始和结尾处的空格,并将中间的多个连续的空格合并成一个。
* 方法1.用已有的String类的trim和replaceAll方法
* 方法2.全部用正则表达式,这个我不熟
* 方法3.“重新发明轮子”,从头遍历一次
*/
public static v
- An error has occurred.See the log file错误解决!
Kai_Ge
MyEclipse
今天早上打开MyEclipse时,自动关闭!弹出An error has occurred.See the log file错误提示!
很郁闷昨天启动和关闭还好着!!!打开几次依然报此错误,确定不是眼花了!
打开日志文件!找到当日错误文件内容:
--------------------------------------------------------------------------
- [矿业与工业]修建一个空间矿床开采站要多少钱?
comsci
地球上的钛金属矿藏已经接近枯竭...........
我们在冥王星的一颗卫星上面发现一些具有开采价值的矿床.....
那么,现在要编制一个预算,提交给财政部门..
- 解析Google Map Routes
dai_lm
google api
为了获得从A点到B点的路劲,经常会使用Google提供的API,例如
[url]
http://maps.googleapis.com/maps/api/directions/json?origin=40.7144,-74.0060&destination=47.6063,-122.3204&sensor=false
[/url]
从返回的结果上,大致可以了解应该怎么走,但
- SQL还有多少“理所应当”?
datamachine
sql
转贴存档,原帖地址:http://blog.chinaunix.net/uid-29242841-id-3968998.html、http://blog.chinaunix.net/uid-29242841-id-3971046.html!
------------------------------------华丽的分割线--------------------------------
- Yii使用Ajax验证时,如何设置某些字段不需要验证
dcj3sjt126com
Ajaxyii
经常像你注册页面,你可能非常希望只需要Ajax去验证用户名和Email,而不需要使用Ajax再去验证密码,默认如果你使用Yii 内置的ajax验证Form,例如:
$form=$this->beginWidget('CActiveForm', array( 'id'=>'usuario-form',&
- 使用git同步网站代码
dcj3sjt126com
crontabgit
转自:http://ued.ctrip.com/blog/?p=3646?tn=gongxinjun.com
管理一网站,最开始使用的虚拟空间,采用提供商支持的ftp上传网站文件,后换用vps,vps可以自己搭建ftp的,但是懒得搞,直接使用scp传输文件到服务器,现在需要更新文件到服务器,使用scp真的很烦。发现本人就职的公司,采用的git+rsync的方式来管理、同步代码,遂
- sql基本操作
蕃薯耀
sqlsql基本操作sql常用操作
sql基本操作
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
蕃薯耀 2015年6月1日 17:30:33 星期一
&
- Spring4+Hibernate4+Atomikos3.3多数据源事务管理
hanqunfeng
Hibernate4
Spring3+后不再对JTOM提供支持,所以可以改用Atomikos管理多数据源事务。Spring2.5+Hibernate3+JTOM参考:http://hanqunfeng.iteye.com/blog/1554251Atomikos官网网站:http://www.atomikos.com/ 一.pom.xml
<dependency>
<
- jquery中两个值得注意的方法one()和trigger()方法
jackyrong
trigger
在jquery中,有两个值得注意但容易忽视的方法,分别是one()方法和trigger()方法,这是从国内作者<<jquery权威指南》一书中看到不错的介绍
1) one方法
one方法的功能是让所选定的元素绑定一个仅触发一次的处理函数,格式为
one(type,${data},fn)
&nb
- 拿工资不仅仅是让你写代码的
lampcy
工作面试咨询
这是我对团队每个新进员工说的第一件事情。这句话的意思是,我并不关心你是如何快速完成任务的,哪怕代码很差,只要它像救生艇通气门一样管用就行。这句话也是我最喜欢的座右铭之一。
这个说法其实很合理:我们的工作是思考客户提出的问题,然后制定解决方案。思考第一,代码第二,公司请我们的最终目的不是写代码,而是想出解决方案。
话粗理不粗。
付你薪水不是让你来思考的,也不是让你来写代码的,你的目的是交付产品
- 架构师之对象操作----------对象的效率复制和判断是否全为空
nannan408
架构师
1.前言。
如题。
2.代码。
(1)对象的复制,比spring的beanCopier在大并发下效率要高,利用net.sf.cglib.beans.BeanCopier
Src src=new Src();
BeanCopier beanCopier = BeanCopier.create(Src.class, Des.class, false);
- ajax 被缓存的解决方案
Rainbow702
JavaScriptjqueryAjaxcache缓存
使用jquery的ajax来发送请求进行局部刷新画面,各位可能都做过。
今天碰到一个奇怪的现象,就是,同一个ajax请求,在chrome中,不论发送多少次,都可以发送至服务器端,而不会被缓存。但是,换成在IE下的时候,发现,同一个ajax请求,会发生被缓存的情况,只有第一次才会被发送至服务器端,之后的不会再被发送。郁闷。
解决方法如下:
① 直接使用 JQuery提供的 “cache”参数,
- 修改date.toLocaleString()的警告
tntxia
String
我们在写程序的时候,经常要查看时间,所以我们经常会用到date.toLocaleString(),但是date.toLocaleString()是一个过时 的API,代替的方法如下:
package com.tntxia.htmlmaker.util;
import java.text.SimpleDateFormat;
import java.util.
- 项目完成后的小总结
xiaomiya
js总结项目
项目完成了,突然想做个总结但是有点无从下手了。
做之前对于客户端给的接口很模式。然而定义好了格式要求就如此的愉快了。
先说说项目主要实现的功能吧
1,按键精灵
2,获取行情数据
3,各种input输入条件判断
4,发送数据(有json格式和string格式)
5,获取预警条件列表和预警结果列表,
6,排序,
7,预警结果分页获取
8,导出文件(excel,text等)
9,修