- 大屏适配方案
木公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
- 桌面上有多个球在同时运动,怎么实现球之间不交叉,即碰撞?
换个号韩国红果果
html小球碰撞
稍微想了一下,然后解决了很多bug,最后终于把它实现了。其实原理很简单。在每改变一个小球的x y坐标后,遍历整个在dom树中的其他小球,看一下它们与当前小球的距离是否小于球半径的两倍?若小于说明下一次绘制该小球(设为a)前要把他的方向变为原来相反方向(与a要碰撞的小球设为b),即假如当前小球的距离小于球半径的两倍的话,马上改变当前小球方向。那么下一次绘制也是先绘制b,再绘制a,由于a的方向已经改变
- 《高性能HTML5》读后整理的Web性能优化内容
白糖_
html5
读后感
先说说《高性能HTML5》这本书的读后感吧,个人觉得这本书前两章跟书的标题完全搭不上关系,或者说只能算是讲解了“高性能”这三个字,HTML5完全不见踪影。个人觉得作者应该首先把HTML5的大菜拿出来讲一讲,再去分析性能优化的内容,这样才会有吸引力。因为只是在线试读,没有机会看后面的内容,所以不胡乱评价了。
- [JShop]Spring MVC的RequestContextHolder使用误区
dinguangx
jeeshop商城系统jshop电商系统
在spring mvc中,为了随时都能取到当前请求的request对象,可以通过RequestContextHolder的静态方法getRequestAttributes()获取Request相关的变量,如request, response等。 在jshop中,对RequestContextHolder的
- 算法之时间复杂度
周凡杨
java算法时间复杂度效率
在
计算机科学 中,
算法 的时间复杂度是一个
函数 ,它定量描述了该算法的运行时间。这是一个关于代表算法输入值的
字符串 的长度的函数。时间复杂度常用
大O符号 表述,不包括这个函数的低阶项和首项系数。使用这种方式时,时间复杂度可被称为是
渐近 的,它考察当输入值大小趋近无穷时的情况。
这样用大写O()来体现算法时间复杂度的记法,
- Java事务处理
g21121
java
一、什么是Java事务 通常的观念认为,事务仅与数据库相关。 事务必须服从ISO/IEC所制定的ACID原则。ACID是原子性(atomicity)、一致性(consistency)、隔离性(isolation)和持久性(durability)的缩写。事务的原子性表示事务执行过程中的任何失败都将导致事务所做的任何修改失效。一致性表示当事务执行失败时,所有被该事务影响的数据都应该恢复到事务执行前的状
- Linux awk命令详解
510888780
linux
一. AWK 说明
awk是一种编程语言,用于在linux/unix下对文本和数据进行处理。数据可以来自标准输入、一个或多个文件,或其它命令的输出。它支持用户自定义函数和动态正则表达式等先进功能,是linux/unix下的一个强大编程工具。它在命令行中使用,但更多是作为脚本来使用。
awk的处理文本和数据的方式:它逐行扫描文件,从第一行到
- android permission
布衣凌宇
Permission
<uses-permission android:name="android.permission.ACCESS_CHECKIN_PROPERTIES" ></uses-permission>允许读写访问"properties"表在checkin数据库中,改值可以修改上传
<uses-permission android:na
- Oracle和谷歌Java Android官司将推迟
aijuans
javaoracle
北京时间 10 月 7 日,据国外媒体报道,Oracle 和谷歌之间一场等待已久的官司可能会推迟至 10 月 17 日以后进行,这场官司的内容是 Android 操作系统所谓的 Java 专利权之争。本案法官 William Alsup 称根据专利权专家 Florian Mueller 的预测,谷歌 Oracle 案很可能会被推迟。 该案中的第二波辩护被安排在 10 月 17 日出庭,从目前看来
- linux shell 常用命令
antlove
linuxshellcommand
grep [options] [regex] [files]
/var/root # grep -n "o" *
hello.c:1:/* This C source can be compiled with:
- Java解析XML配置数据库连接(DOM技术连接 SAX技术连接)
百合不是茶
sax技术Java解析xml文档dom技术XML配置数据库连接
XML配置数据库文件的连接其实是个很简单的问题,为什么到现在才写出来主要是昨天在网上看了别人写的,然后一直陷入其中,最后发现不能自拔 所以今天决定自己完成 ,,,,现将代码与思路贴出来供大家一起学习
XML配置数据库的连接主要技术点的博客;
JDBC编程 : JDBC连接数据库
DOM解析XML: DOM解析XML文件
SA
- underscore.js 学习(二)
bijian1013
JavaScriptunderscore
Array Functions 所有数组函数对参数对象一样适用。1.first _.first(array, [n]) 别名: head, take 返回array的第一个元素,设置了参数n,就
- plSql介绍
bijian1013
oracle数据库plsql
/*
* PL/SQL 程序设计学习笔记
* 学习plSql介绍.pdf
* 时间:2010-10-05
*/
--创建DEPT表
create table DEPT
(
DEPTNO NUMBER(10),
DNAME NVARCHAR2(255),
LOC NVARCHAR2(255)
)
delete dept;
select
- 【Nginx一】Nginx安装与总体介绍
bit1129
nginx
启动、停止、重新加载Nginx
nginx 启动Nginx服务器,不需要任何参数u
nginx -s stop 快速(强制)关系Nginx服务器
nginx -s quit 优雅的关闭Nginx服务器
nginx -s reload 重新加载Nginx服务器的配置文件
nginx -s reopen 重新打开Nginx日志文件
- spring mvc开发中浏览器兼容的奇怪问题
bitray
jqueryAjaxspringMVC浏览器上传文件
最近个人开发一个小的OA项目,属于复习阶段.使用的技术主要是spring mvc作为前端框架,mybatis作为数据库持久化技术.前台使用jquery和一些jquery的插件.
在开发到中间阶段时候发现自己好像忽略了一个小问题,整个项目一直在firefox下测试,没有在IE下测试,不确定是否会出现兼容问题.由于jquer
- Lua的io库函数列表
ronin47
lua io
1、io表调用方式:使用io表,io.open将返回指定文件的描述,并且所有的操作将围绕这个文件描述
io表同样提供三种预定义的文件描述io.stdin,io.stdout,io.stderr
2、文件句柄直接调用方式,即使用file:XXX()函数方式进行操作,其中file为io.open()返回的文件句柄
多数I/O函数调用失败时返回nil加错误信息,有些函数成功时返回nil
- java-26-左旋转字符串
bylijinnan
java
public class LeftRotateString {
/**
* Q 26 左旋转字符串
* 题目:定义字符串的左旋转操作:把字符串前面的若干个字符移动到字符串的尾部。
* 如把字符串abcdef左旋转2位得到字符串cdefab。
* 请实现字符串左旋转的函数。要求时间对长度为n的字符串操作的复杂度为O(n),辅助内存为O(1)。
*/
pu
- 《vi中的替换艺术》-linux命令五分钟系列之十一
cfyme
linux命令
vi方面的内容不知道分类到哪里好,就放到《Linux命令五分钟系列》里吧!
今天编程,关于栈的一个小例子,其间我需要把”S.”替换为”S->”(替换不包括双引号)。
其实这个不难,不过我觉得应该总结一下vi里的替换技术了,以备以后查阅。
1
所有替换方案都要在冒号“:”状态下书写。
2
如果想将abc替换为xyz,那么就这样
:s/abc/xyz/
不过要特别
- [轨道与计算]新的并行计算架构
comsci
并行计算
我在进行流程引擎循环反馈试验的过程中,发现一个有趣的事情。。。如果我们在流程图的每个节点中嵌入一个双向循环代码段,而整个流程中又充满着很多并行路由,每个并行路由中又包含着一些并行节点,那么当整个流程图开始循环反馈过程的时候,这个流程图的运行过程是否变成一个并行计算的架构呢?
- 重复执行某段代码
dai_lm
android
用handler就可以了
private Handler handler = new Handler();
private Runnable runnable = new Runnable() {
public void run() {
update();
handler.postDelayed(this, 5000);
}
};
开始计时
h
- Java实现堆栈(list实现)
datageek
数据结构——堆栈
public interface IStack<T> {
//元素出栈,并返回出栈元素
public T pop();
//元素入栈
public void push(T element);
//获取栈顶元素
public T peek();
//判断栈是否为空
public boolean isEmpty
- 四大备份MySql数据库方法及可能遇到的问题
dcj3sjt126com
DBbackup
一:通过备份王等软件进行备份前台进不去?
用备份王等软件进行备份是大多老站长的选择,这种方法方便快捷,只要上传备份软件到空间一步步操作就可以,但是许多刚接触备份王软件的客用户来说还原后会出现一个问题:因为新老空间数据库用户名和密码不统一,网站文件打包过来后因没有修改连接文件,还原数据库是好了,可是前台会提示数据库连接错误,网站从而出现打不开的情况。
解决方法:学会修改网站配置文件,大多是由co
- github做webhooks:[1]钩子触发是否成功测试
dcj3sjt126com
githubgitwebhook
转自: http://jingyan.baidu.com/article/5d6edee228c88899ebdeec47.html
github和svn一样有钩子的功能,而且更加强大。例如我做的是最常见的push操作触发的钩子操作,则每次更新之后的钩子操作记录都会在github的控制板可以看到!
工具/原料
github
方法/步骤
- ">的作用" target="_blank">JSP中的作用
蕃薯耀
JSP中<base href="<%=basePath%>">的作用
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
- linux下SAMBA服务安装与配置
hanqunfeng
linux
局域网使用的文件共享服务。
一.安装包:
rpm -qa | grep samba
samba-3.6.9-151.el6.x86_64
samba-common-3.6.9-151.el6.x86_64
samba-winbind-3.6.9-151.el6.x86_64
samba-client-3.6.9-151.el6.x86_64
samba-winbind-clients
- guava cache
IXHONG
cache
缓存,在我们日常开发中是必不可少的一种解决性能问题的方法。简单的说,cache 就是为了提升系统性能而开辟的一块内存空间。
缓存的主要作用是暂时在内存中保存业务系统的数据处理结果,并且等待下次访问使用。在日常开发的很多场合,由于受限于硬盘IO的性能或者我们自身业务系统的数据处理和获取可能非常费时,当我们发现我们的系统这个数据请求量很大的时候,频繁的IO和频繁的逻辑处理会导致硬盘和CPU资源的
- Query的开始--全局变量,noconflict和兼容各种js的初始化方法
kvhur
JavaScriptjquerycss
这个是整个jQuery代码的开始,里面包含了对不同环境的js进行的处理,例如普通环境,Nodejs,和requiredJs的处理方法。 还有jQuery生成$, jQuery全局变量的代码和noConflict代码详解 完整资源:
http://www.gbtags.com/gb/share/5640.htm jQuery 源码:
(
- 美国人的福利和中国人的储蓄
nannan408
今天看了篇文章,震动很大,说的是美国的福利。
美国医院的无偿入院真的是个好措施。小小的改善,对于社会是大大的信心。小孩,税费等,政府不收反补,真的体现了人文主义。
美国这么高的社会保障会不会使人变懒?答案是否定的。正因为政府解决了后顾之忧,人们才得以倾尽精力去做一些有创造力,更造福社会的事情,这竟成了美国社会思想、人
- N阶行列式计算(JAVA)
qiuwanchi
N阶行列式计算
package gaodai;
import java.util.List;
/**
* N阶行列式计算
* @author 邱万迟
*
*/
public class DeterminantCalculation {
public DeterminantCalculation(List<List<Double>> determina
- C语言算法之打渔晒网问题
qiufeihu
c算法
如果一个渔夫从2011年1月1日开始每三天打一次渔,两天晒一次网,编程实现当输入2011年1月1日以后任意一天,输出该渔夫是在打渔还是在晒网。
代码如下:
#include <stdio.h>
int leap(int a) /*自定义函数leap()用来指定输入的年份是否为闰年*/
{
if((a%4 == 0 && a%100 != 0
- XML中DOCTYPE字段的解析
wyzuomumu
xml
DTD声明始终以!DOCTYPE开头,空一格后跟着文档根元素的名称,如果是内部DTD,则再空一格出现[],在中括号中是文档类型定义的内容. 而对于外部DTD,则又分为私有DTD与公共DTD,私有DTD使用SYSTEM表示,接着是外部DTD的URL. 而公共DTD则使用PUBLIC,接着是DTD公共名称,接着是DTD的URL.
私有DTD
<!DOCTYPErootSYST