2021-01-15 10:32发布
现在需求要适配三块不同分辨率的大屏,是用自适应单位来写方便点还是写三套样式
这里有一篇文章可以帮助你
https://blog.csdn.net/qq_40282732/article/details/105962708
你可以自己写一个js文件进行适配,在页面内引入,这样就可以适配不同分辨率的屏幕。
其实js核心内容就是css3样式 transform:scale(x,y);
原理分析:设定好你开发代码的电脑的分辨率,然后动态获取展示大屏的分辨率,通过宽高比,获取两个屏幕的比例,然后设置scale(x,y)中的x,y,就可以实现完全适配。
[removed] export default { name: 'App', components: {}, mounted() { this.setFontSize() }, methods: { setFontSize() { // 获取整个文档元素 var docEl = document.documentElement, resizeEvt = // 获取移动端屏幕是否翻转 // 判断windows中是否有这个属性orientationchange 因为orientationchange会遇到兼容性问题,有的浏览器不支持 resize窗体发生改变就会触发这个事件 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth //clientWidth的实际宽度=width+左右padding if (!clientWidth) return var size = 100 * (clientWidth / 1920) docEl.style.fontSize = (size < 100 ? size : 100) + 'px' } // 判断addEventListener是否存在,addEventListener的第三个参数true 代表捕获 false是冒泡 if (!document.addEventListener) return window.addEventListener(resizeEvt, recalc, false) document.addEventListener('DOMContentLoaded', recalc, false)//DOMContentLoaded可以检测dom是否加载完成 // console.log('docEl',docEl); } } } [removed]
项目基于vue-cli搭建,之前项目采用less的功能函数集合媒体查询做的屏幕适配,但是由于JavaScript的对浮点数据处理,这个语言本身的bug问题,总是会出现一些计算误差,这里重新做的项目采用淘宝的lib-flexible的库,来做屏幕自适应处理.vue-cli搭建完成以后,安装完依赖,项目可以运行以后,我们接着安装felxible库:
image.png
npm i lib-flexible -S
npm安装不上去的,可以切换到cnpm上来安装,然后在主文件main.js里面引入:
import 'lib-flexible'
在index.html文件中设置meta标签:
然后在项目中写css时会自动将rem转化为px,需要安装px2rem这个工具,安装:
npm i px2rem-loader -D
在until.js配置文件对loader做相关配置:
如上图,在cssLoader对象下面添加一个px2remLoader对象:
const px2remLoader = { loader : 'px2rem-loader', options : { //这个参数是通过psd设计稿的 宽度 / 10 来计算,这里以750为标准 remUnit : 75 } }
然后将utils.js文件中的generateLoaders函数的loaders常量改为[cssLoader, px2remLoader],如下图:
const loaders = [cssLoader, px2remLoader];
这样就做完了所以配置,当你做开发时,只需要将设计稿上面量到的尺寸写出来就可以了,比如font-size:18px;就直接写18px就可以
可以借鉴一下别人的思路:
1.初始化的时候获得大屏幕的比例2.把这个比例设置给css的scale变量3.监听浏览器的窗口大小, 将新的比例赋给scale变量这样不管屏幕有多大,分辨率有多高,只要屏幕的比例跟你定的比例一致,就都能适配了
设定好你开发代码的电脑的分辨率,然后动态获取展示大屏的分辨率,通过宽高比,获取两个屏幕的比例,然后设置scale(x,y)中的x,y,就可以实现完全适配。
1.重构响应式系统,使用Proxy替换Object.defineProperty,使用Proxy优势:•可直接监听数组类型的数据变化•监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升•可拦截apply、ownKeys、has等13种方法,而Object.define...
vue页面跳转后返回原页面初始位置 vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly...
这个问题建议你系统了解下MVC→MVP→MVVM的进化历程。(1)首先说下MVC MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写。MVC开始是存在于桌面程序中,使用MVC的目的是将M和V的实现代码分离。从图里可以看...
目前,对于SEO支持比较好的项目方案是采用服务端渲染。所以如果项目有SEO需求,那么比较好的方案是服务端渲染。如果你已经采用了前后分离的单页项目,而你的网站内容不需要AJAX去获取内容和展示内容,那么可以试试 prerender-spa-plugin 这个插件,这个插件是...
Bootstrap和vue不是一个层级的东西.Bootstrap是在jquery时代的UI组件库,而且Bootstrap大部分组件是依赖css的,依赖jQuery的组件主要是有交互的弹窗组件、下拉菜单等
首先你需要引入另一个界面,然后通过$refs.refName的方式调用弹框的方法后者直接把弹框的属性置成true。注意需要另一个页面渲染完成后才能用【$refs.refName】
是的,前端不会Vue根本就没必要再聊下去了
内部图表大小是与div容器大小位置相关的,如果想调整图表大小位置,调整div的属性就可以。如果是想调整图表与div间上下左右留白,则设置grid属性就可以。
使用 /deep/ 注意:使用 cass 和 less 只能使用 /deep/ 这个方法
创建icons/svg文件夹将svg文件放在该文件夹下面在components文件夹中创建svgiconfont.vue文件文件内容: [removed] import '@/icons' export default { name: 'svg-icon', props: { iconClass: { ...
引用数据类型数组的元素是对象引用,没有实际的值,需要给它实例。例如date days = new date[5];days[0] = new date(2000,12,3)每一个days都要去分配。而基础类型都有默认初始值。
计算属性与响应式并不冲突对立的存在,计算属性往往是用于数据的聚合或者离散,数据响应式的话就是视图响应数据变动(先容我装个逼)在vue中就是通过watcher调用一次实例对象中data的数据(当然这层数据也会做一层映射,映射到实例的属性中)在数据的defineOb...
Vue中有一个自带的transition组件,就是用来实现过渡效果的,具体怎么使用呢,很简单,其实就两个步骤:①用transition组件,把要做过渡效果的元素包起来②写上相应的过渡效果的css是不是很简单,比把大象装冰箱还简单。然而,并没有,在这两个步骤中,我们要...
最多设置5个标签!
这里有一篇文章可以帮助你
https://blog.csdn.net/qq_40282732/article/details/105962708
你可以自己写一个js文件进行适配,在页面内引入,这样就可以适配不同分辨率的屏幕。
其实js核心内容就是css3样式 transform:scale(x,y);
原理分析:设定好你开发代码的电脑的分辨率,然后动态获取展示大屏的分辨率,通过宽高比,获取两个屏幕的比例,然后设置scale(x,y)中的x,y,就可以实现完全适配。
你可以自己写一个js文件进行适配,在页面内引入,这样就可以适配不同分辨率的屏幕。
其实js核心内容就是css3样式 transform:scale(x,y);
原理分析:设定好你开发代码的电脑的分辨率,然后动态获取展示大屏的分辨率,通过宽高比,获取两个屏幕的比例,然后设置scale(x,y)中的x,y,就可以实现完全适配。
起由
项目基于vue-cli搭建,之前项目采用less的功能函数集合媒体查询做的屏幕适配,但是由于JavaScript的对浮点数据处理,这个语言本身的bug问题,总是会出现一些计算误差,这里重新做的项目采用淘宝的lib-flexible的库,来做屏幕自适应处理.
vue-cli搭建完成以后,安装完依赖,项目可以运行以后,我们接着安装felxible库:
image.png
npm安装不上去的,可以切换到cnpm上来安装,然后在主文件main.js里面引入:
image.png
在index.html文件中设置meta标签:
image.png
然后在项目中写css时会自动将rem转化为px,需要安装px2rem这个工具,安装:
image.png
在until.js配置文件对loader做相关配置:
image.png
如上图,在cssLoader对象下面添加一个px2remLoader对象:
然后将utils.js文件中的generateLoaders函数的loaders常量改为[cssLoader, px2remLoader],如下图:
image.png
这样就做完了所以配置,当你做开发时,只需要将设计稿上面量到的尺寸写出来就可以了,比如font-size:18px;就直接写18px就可以
可以借鉴一下别人的思路:
1.初始化的时候获得大屏幕的比例
2.把这个比例设置给css的scale变量
3.监听浏览器的窗口大小, 将新的比例赋给scale变量
这样不管屏幕有多大,分辨率有多高,只要屏幕的比例跟你定的比例一致,就都能适配了
设定好你开发代码的电脑的分辨率,然后动态获取展示大屏的分辨率,通过宽高比,获取两个屏幕的比例,然后设置scale(x,y)中的x,y,就可以实现完全适配。
相关问题推荐
1.重构响应式系统,使用Proxy替换Object.defineProperty,使用Proxy优势:•可直接监听数组类型的数据变化•监听的目标为对象本身,不需要像Object.defineProperty一样遍历每个属性,有一定的性能提升•可拦截apply、ownKeys、has等13种方法,而Object.define...
vue页面跳转后返回原页面初始位置 vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly...
这个问题建议你系统了解下MVC→MVP→MVVM的进化历程。(1)首先说下MVC MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写。MVC开始是存在于桌面程序中,使用MVC的目的是将M和V的实现代码分离。从图里可以看...
目前,对于SEO支持比较好的项目方案是采用服务端渲染。所以如果项目有SEO需求,那么比较好的方案是服务端渲染。如果你已经采用了前后分离的单页项目,而你的网站内容不需要AJAX去获取内容和展示内容,那么可以试试 prerender-spa-plugin 这个插件,这个插件是...
Bootstrap和vue不是一个层级的东西.Bootstrap是在jquery时代的UI组件库,而且Bootstrap大部分组件是依赖css的,依赖jQuery的组件主要是有交互的弹窗组件、下拉菜单等
首先你需要引入另一个界面,然后通过$refs.refName的方式调用弹框的方法后者直接把弹框的属性置成true。注意需要另一个页面渲染完成后才能用【$refs.refName】
是的,前端不会Vue根本就没必要再聊下去了
内部图表大小是与div容器大小位置相关的,如果想调整图表大小位置,调整div的属性就可以。如果是想调整图表与div间上下左右留白,则设置grid属性就可以。
使用 /deep/ 注意:使用 cass 和 less 只能使用 /deep/ 这个方法
创建icons/svg文件夹将svg文件放在该文件夹下面在components文件夹中创建svgiconfont.vue文件文件内容: [removed] import '@/icons' export default { name: 'svg-icon', props: { iconClass: { ...
引用数据类型数组的元素是对象引用,没有实际的值,需要给它实例。例如date days = new date[5];days[0] = new date(2000,12,3)每一个days都要去分配。而基础类型都有默认初始值。
计算属性与响应式并不冲突对立的存在,计算属性往往是用于数据的聚合或者离散,数据响应式的话就是视图响应数据变动(先容我装个逼)在vue中就是通过watcher调用一次实例对象中data的数据(当然这层数据也会做一层映射,映射到实例的属性中)在数据的defineOb...
Vue中有一个自带的transition组件,就是用来实现过渡效果的,具体怎么使用呢,很简单,其实就两个步骤:①用transition组件,把要做过渡效果的元素包起来②写上相应的过渡效果的css是不是很简单,比把大象装冰箱还简单。然而,并没有,在这两个步骤中,我们要...