vue自适应前端框架,vue 响应式自适应布局
最近项目开发中有一个需求，需要实现自动宽度适配。因此，以下文章主要介绍Vue前端项目自适应布局的相关信息。通过示例代码介绍的非常详细，有需要的朋友可以参考一下。
目录
一、单元尺寸二。基于rem的自适应布局。附：html5页面rem布局适配方法总结
一、单位尺寸
Px%vw，VH:Window em:font-sizerem for parent element:“root em”的缩写，是相对长度单位；rem单元作用于非根元素时，初始字号是相对于根元素(html)的字号，rem单元作用于根元素的字号时，初始字号是相对于它的。说明：
谷歌浏览器，字体默认大小为16px
如果父元素item1的font-size=50px，那么子元素item2的1em=50px。
如果html的顶部字体大小为20px那么子元素item2的1rem就是20px。
二、基于rem实现自适应布局
假设页面的根元素，不设置font-size的大小，默认值为16px。
按照设计，我们页面的主要部分是500像素宽；200px高。要转换为自适应布局，我们只需要将px转换为rem。
转换后：
宽度：500/16雷姆
高度：200/16雷姆
附：html5页面 的rem 布局适配方法
rem 布局适配方案
主要方法有：
根据设计稿与设备宽度的比例，动态计算并设置html根标签的字体大小；在css中，设计草图元素的宽度、高度和相对位置的值按照相同的比例转换成rem值；设计中字体以px为单位，通过媒体查询略有调整。1 动态设置 html 标签 font-size 大小
紧凑型通用版本：
！(函数(win，doc){
函数setFontSize() {
//获取窗口宽度
//zepto实现$(window)。宽度()就这样。
var win width=window . inner width；
//doc . documentelement . style . fontsize=(win width/640)* 100 px ；
//640对宽度的限制需要css的配合。
var size=(win width/640)* 100；
doc . document element . style . font size=(size 100？大小：100) px ；
}
var evt= onoorientationchange in win？orientationchange“:”调整大小；
var timer=null
win.addEventListener(evt，function () {
clearTimeout(定时器)；
timer=setTimeout(setFontSize，300)；
}，假)；
win.addEventListener(pageshow ，函数(e) {
如果(e.persisted) {
clearTimeout(定时器)；
timer=setTimeout(setFontSize，300)；
}
}，假)；
//初始化
set fontsize()；
}(窗口，文档))；
准确版本：
(函数(WIN) {
var set fontsize=win . set fontsize=function(_ width){
var docEl=document . document element；
//获取当前窗口的宽度
var width=_ width docel . client width；//docEl.getBoundingClientRect()。宽度；
//大于1080px就按1080
如果(宽度1080) {
宽度=1080；
}
var rem=宽度/10；
console . log(rem)；
docel . style . font size=rem px ；
//错误和兼容性处理
var actualSize=win . getcomputedstyle parse float(win . getcomputedstyle(docEl)[ font-size ])；
if (actualSize！==rem actualSize 0 math . ABS(actualSize-rem)1){
var rem scaled=rem * rem/actualSize；
docel . style . font size=rem scaled px ；
}
}
var定时器；
函数dbcRefresh() {
clearTimeout(定时器)；
timer=setTimeout(setFontSize，100)；
}
//窗口更新动态改变字体大小
WIN.addEventListener(resize ，dbcRefresh，false)；
//显示页面时计算一次
WIN.addEventListener(pageshow ，函数(e) {
如果(e.persisted) {
dbcRefresh()
}
}，假)；
set fontsize()；
})(窗口)
//对于页面推送的H5活动，需要长宽比，可以适当调整。
函数adjustWarp(warpId=#warp) {
const $ win=$(window)；
const height=$ win . height()；
let width=$ win . width()；
//考虑导航栏的情况
如果（宽/高360/600) {
返回；
}
width=Math.ceil(高度* 360/640);
$(疣猪).css({
身高，
宽度，
位置："相对",
top: 0，
左："自动",
边距："0自动"
});
//重新计算雷姆
window.setFontSize(宽度);
}
2 通过 CSS3媒体查询设置 rem
简单易用缺乏灵活度请看演示你懂的
@媒体屏幕和（最小宽度：320像素){html{font-size:50px}}
@媒体屏幕和（最小宽度：360像素){ html { font-size:56.25像素}}
@媒体屏幕和（最小宽度：375像素){ html { font-size:58.59375像素} }
@媒体屏幕和（最小宽度：384px){html{font-size:60px}}
@媒体屏幕和（最小宽度：400像素){ html { font-size:62.5像素}}
@媒体屏幕和（最小宽度：414像素){ html { font-size:64.6875像素} }
@媒体屏幕和（最小宽度：424像素){ html { font-size:66.25像素} }
@媒体屏幕和（最小宽度：480像素){html{font-size:75px}}
@媒体屏幕和（最小宽度：540像素){ html { font-size:84.375像素}}
@媒体屏幕和（最小宽度：640像素){ html { font-size:100像素}}
根据个人项目需求和产品设计可适当修改，以上演示写法并不唯一固定。
总结
到此这篇关于某视频剪辑软件前端项目自适应布局的文章就介绍到这了，更多相关某视频剪辑软件前端自适应布局内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。