移动端fixed布局兼容性不好,使用absolute布局来代替
程序员文章站
2022-05-04 11:15:26
在移动端使用fixed布局存在兼容性问题,因此使用absolute布局来代替 效果演示 src/app.vue里打好框架
头部导航
在移动端使用fixed布局存在兼容性问题,因此使用absolute布局来代替
效果演示
src/app.vue里打好框架
<template> <div id="app" class="g-container"> <div class="g-header-container"> 头部导航 </div> <div class="g-view-container"> <div class="content"> 内容区域 </div> </div> <div class="g-footer-container"> 底部导航 </div> </div> </template> <script> export default { name: 'app', } </script> <style scoped> .g-container{ position: relative; width:100%; height:100%; max-width:640px; min-width:320px; margin:0 auto; overflow:hidden; } .g-header-container{ position:absolute; left:0; top:0; width:100%; z-index:999; height:64px; background:pink; } .g-view-container{ height:100%; padding-bottom:80px; background:lightblue; overflow:auto; } .content{ height:2000px; } .g-footer-container{ position:absolute; left:0; bottom:0; width:100%; box-shadow:0 0 10px 0 hsla(0,6%,58%,0.6); height:80px; z-index:999; background:lightgreen; } </style>
在main.js里引入首页文件的样式index.scss
// the vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import 'babel-polyfill' import fastclick from 'fastclick' import vue from 'vue' import app from './app' import router from './router' //给默认主页引入index.scss样式文件 import 'assets/scss/index.scss'; vue.config.productiontip = false //给body元素设置fastclick fastclick.attach(document.body); /* eslint-disable no-new */ new vue({ el: '#app', router, components: { app }, template: '<app/>' })
assets/scss/index.scss
*{ margin:0; padding:0; } html,body{ // 必须设置,否则内容滚动效果无法实现 width:100%; height:100%; }
上一篇: python学习之由