vue做大屏适配,vue大屏展示项目实例
众所周知在某视频剪辑软件移动端h5页面当中，适配是经常会遇到的问题，这篇文章主要给大家介绍了关于某视频剪辑软件项目适配大屏端的相关资料，需要的朋友可以参考下
浅析rem
首先雷姆是钢性铸铁单位，相比于像素固定的像素单位，rem更加的灵活，还有现在也比较好的虚拟机。如果从未了解过，可以先过过眼
雷姆自适应100 .CSS3的识别内存(识别记忆)设置字体大小
根元素的字体大小。
简单来说，rem就是根据超文本标记语言元素的字体大小来计算单位的。我们的需求就是说，根据不同的分辨率，我们元素的大小能够有所对应的变化，在视觉上能够做到很舒服的效果。想想我们在做个人计算机端的时候，一般都是中间固定比如1200像素像素，然后最小1200px，两边留白，这样我们无论放大缩小都不会影响效果。但是现在移动端各种屏幕的出现，适应性就更加的强烈。根据分辨率的不同让超文本标记语言的字体大小变化，我们在页面中写rem，由于雷姆是相对于根元素字体大小来计算的，那么就可以实现自适应的效果。
1.适配方式
适配方案采用雷姆布局，根据屏幕分辨率大小不同，调整根元素超文本标记语言的字体大小，从而达到每个元素宽高自动变化，适配不同屏幕
2.使用 postcss-px2rem-exclude 插件
安装新公共管理安装后css-px2rem-exclude - save-dev
在项目根目录创建postcss.config.js文件
模块。导出={
插件：{
自动修复程序：{},
postcss-px2rem-exclude: {
记忆单位：192
//排除：/node_modulesfolder_name/i
}
}
}
3.安装 flexible.js (建议放到本地)
安装命令新公共管理安装库-灵活
（函数(赢，赢){
var doc=win.document
var docEl=doc.documentElement
var meta El=doc。查询选择器( meta[name= viewport ])
var灵活El=doc。查询选择器( meta[name= flexible ])
var dpr=0
定义变量标度=0
var tid
var灵活=lib。灵活 (lib。灵活={ })
if (metaEl) {
console.warn(将根据已有的自指的标签来设置缩放比例)
var match=metaEl。getAttribute(content )
//eslint-disable-next-line unused-escape。match(/initial\-scale=([\d\ .] )/)
如果（匹配){
scale=parseFloat(match[1])
dpr=parseInt(1 /标度)
}
} else if (flexibleEl) {
var内容=灵活El。获取属性(“内容”)
如果（内容){
//eslint-disable-next-line unused-escape
var初始DPR=含量。匹配(/initial \-DPR=([\ d \ .] )/)
//eslint-disable-next-line unused-escape
var最大DPR=含量。匹配(/最大值\-DPR=([\ d \ .] )/)
if (initialDpr) {
dpr=parseFloat(initialDpr[1])
scale=parseFloat((1/dpr)).toFixed(2))
}
if (maximumDpr) {
dpr=parseFloat(maximumDpr[1])
scale=parseFloat((1/dpr)).toFixed(2))
}
}
}
如果(!dpr！缩放){
//var isan droid=win。领航员。appversion。match(/Android/gi)；
var isi phone=win。领航员。appversion。匹配(/iphone/gi)
var devicepixelrratio=win。设备像素比例
if (isIPhone) {
//iOS下，对于2和3的屏，用2倍的方案，其余的用一倍方案
if(devicepixelrratio=3(！dpr dpr=3)) {
dpr=3
} else if(devicepixelrratio=2(！dpr dpr=2)) {
dpr=2
}否则{
dpr=1
}
}否则{
//其他设备下，仍旧使用一倍的方案
dpr=1
}
比例=1/dpr
}
docEl.setAttribute(data-dpr ，dpr)
如果(!金属){
metaEl=doc.createElement(meta )
metaEl.setAttribute(name ， viewport )
metaEl.setAttribute(content ， initial-scale= scale ，maximum-scale= scale ，minimum-scale= scale ，user-scalable=no))
if (docEl.firstElementChild) {
多西。第一个元素child。appendchild(metaEl)
}否则{
var wrap=doc.createElement(div )
wrap.appendChild(metaEl)
doc.write(wrap.innerHTML)
}
}
函数refreshRem() {
var width=docel。getboundingclientrect().宽度
如果（宽度/dpr 540) {
宽度=宽度* dpr
}
var rem=宽度/10
docEl.style.fontSize=rem px
flexible.rem=win.rem=rem
}
win.addEventListener(
调整大小，
函数(){
清除超时(工贸署)
tid=setTimeout(refreshRem，300)
},
错误的
)
win.addEventListener(
页面显示，
功能(e) {
如果(持久存在){
清除超时(工贸署)
tid=setTimeout(refreshRem，300)
}
},
错误的
)
如果(doc。就绪状态===完成){
医生。身体。风格。字体大小=12 * DPR 像素
}否则{
doc.addEventListener(
DOMContentLoaded ，
函数(){
医生。身体。风格。字体大小=12 * DPR 像素
},
错误的
)
}
refreshRem()
flexible.dpr=win.dpr=dpr
flexible.refreshRem=refreshRem
flexible.rem2px=function(d) {
var val=parseFloat(d) * this.rem
if(type of d=== string d . match(/rem $/)){
val=px
}
返回值
}
flexible.px2rem=function(d) {
var val=parseFloat(d)/this.rem
if(type of d=== string d . match(/px $/)){
瓦尔=雷姆
}
返回值
}
})(窗口，窗口[lib] (窗口[lib]={}))
上面的代码与安装的灵活。射流研究…不同
修改了
函数refreshRem() {
var width=docel。getboundingclientrect().宽度
如果（宽度/dpr 540) {
宽度=宽度* dpr
}
var rem=宽度/10
docEl.style.fontSize=rem px
flexible.rem=win.rem=rem
}
在主页。射流研究…中引入
导入路径/flexible.js
总结
到此这篇关于某视频剪辑软件项目适配大屏端的文章就介绍到这了，更多相关某视频剪辑软件适配大屏端内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。