移动端适配问题

来源:12-3 使用 vite 构建代码

慕莱坞3345942

2022-08-03

老师你好
这里因为是使用了路由,所以自己写了下按键切换样式
思路是:

  1. 外边父盒子下边框始终是一条灰线
  2. 通过按键 margin-bottom:-1px 让下边框重合
  3. 通过 vue3 的 router-link-active 给选中的按键下边框改为白色
    出现以下问题:

移动端( button 下边框无法盖住父盒子的下边框)
图片描述PC端正常
图片描述

写回答

2回答

张轩

2022-08-05

同学你好 我使用你的代码库,并没有发现你描述的问题,你是修改了吗?请看截图:

//img.mukewang.com/szimg/62ec68f209b47a4b08940404.jpg

实现的话:可以参考 https://element-plus.gitee.io/zh-CN/component/tabs.html#%E5%B8%A6%E6%9C%89%E8%BE%B9%E6%A1%86%E7%9A%84%E5%8D%A1%E7%89%87%E9%A3%8E%E6%A0%BC

它的思路是 所有的item 都是 一像素的透明边框,假如是active,将边框的颜色改变即可,可以研究一下上面的例子。

0
1
慕莱坞3345942
感谢老师,我没有修改,在 Chrome 和 Firefox 都会出现,不同的是随着浏览器缩放比例不同时出现。 明白老师的意思了,另外想问一下, Element 这个组件 标签下边的长线是如何做的呢
2022-08-05
共1条回复

张轩

2022-08-03

同学你好 

能否提供一下你的代码库(git),我明天在本地帮你调试看一看,谢谢~

0
2
慕莱坞3345942
有劳老师了 https://github.com/10r10y/yifang/blob/main/src/views/EditInformation.vue 另外问一下这个是移动端 1px 问题吗,最合适的解决方案是什么呢
2022-08-04
共2条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目,率先掌握 vue3 造轮子技能

3196 学习 · 2362 问题

查看课程