vue页面自适应屏幕分辨率,vue自适应屏幕和浏览器
永远的神干货盘点
1.前言矿泉页面的布局布局对于前端项目的影响至关重要，在我们进行网端开发的时候，前端的各种大小屏幕，各种内核的浏览器不同，会导致我们的页面呈现出不一样的效果，如何进行更好的取舍，怎么能够达到产品对于系统展示效果的满意度，其实我们要前端有一套布局理念，这种理念指导我们如何进行优雅布局，怎么才能不被不合理的需求左右。理念分为以下几点：
预览图片如下：
2.vue的布局风格2.1vue3需要配合元素加进行布局
2.2src下面创建布局文件夹入口文件layoutIndex.vue，三个子组件
布局索引入口文件较为重要：
脚本安装语言=ts
从导入布局标题./布局标题。vue ；
从导入布局主线./布局主视图。vue ；
从导入布局足球运动员./布局页脚。vue ；
从导入菜单./菜单；
从" vue路由器"导入{路由器链接}；
/脚本
模板
差异
埃尔容器
埃尔-页眉布局-页眉/布局-页眉/El-页眉
埃尔容器
左侧宽度= 200像素
航行
路由器链接
v-for=(项目，索引)在菜单中
:key= 菜单"索引"
:to=item.url
{ {项目。title } } { { index 1 } }/路由器链接
/导航
/El-旁白
埃尔容器
埃尔梅因布局-主要/布局-主要/El-主要
埃尔-页脚布局-页脚/布局-页脚/El-页脚
/El-容器
/El-容器
/El-容器
/div
/模板
风格
* {
边距：0;
填充：0;
}。通用布局{
身高：100vh
}。埃尔-容器{
溢出：隐藏；
}。El容器。是-垂直{
身高：100%;
}。导航级{
显示器：flex
伸缩方向：列；
身高：100%;
对齐-项目：居中；
}。导航构成动植物的古名或拉丁化的现代名级
最小高度：35px
行高：35px
颜色：# fff
}。导航构成动植物的古名或拉丁化的现代名级：悬停{
颜色：rgb(151，219，50)；
}。导航构成动植物的古名或拉丁化的现代名级：焦点{
颜色：rgb(151，219，50)；
}。El侧{
背景色：浅灰色；
}
/风格布局足球运动员文件代码
模板
差异页脚/div
/模板
风格。埃尔-页脚{
边距：0;
填充：0;
高度：68px
背景色：天蓝色；
文本对齐：居中；
行高：68px
}
/style main文件代码，就是路由放置区域：
脚本安装语言=ts
从" vue路由器"导入{路由器视图}；
/脚本
模板
差异路由器视图//div
/模板
风格。el-main {
溢出：自动；
身高：100%;
}
/风格滚动效果：头部尾部不动，css控制，弹性布局，没有位置布局
3.测试效果谷歌浏览器，大小缩放等：谷歌浏览器，大小缩放等：
屏幕放大效果：
4.总结主要使用了弯曲布局的弹性：1属性和自适应的css vh百分比这种方式，开局设置溢出：隐藏，主体主要的部分要设置：溢出：自动，这种方式可以自动使得菜单的滚动条和内容的滚动条在一个区域内滚动
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。