vue.js 2.0版本—1像素border实现

最新推荐文章于 2024-06-28 11:27:16 发布

qq_30810825

最新推荐文章于 2024-06-28 11:27:16 发布

阅读量2.2k

点赞数

分类专栏： vue.js 文章标签： vue.js stylus

本文链接：https://blog.csdn.net/qq_30810825/article/details/80615239

版权

本文介绍了如何在Vue.js 2.0项目中实现1像素边框，通过使用Stylus预处理器进行样式编写。文章提供了一种在手机上查看调试样式的方法，即通过IP地址访问并利用二维码。同时，展示了项目中的目录结构，并分享了base.styl, icon.styl, index.styl, mixin.styl等文件的编写内容。作者还推荐了一个学习Stylus的地址，并提及在编写过程中遇到的报错情况。" 102851617,7683613,PyTorch基础：张量与数据类型解析,"['PyTorch教程', '深度学习', '张量运算', 'GPU加速', '数据类型转换']

摘要由CSDN通过智能技术生成

1.怎么手机上观看自己调试好的样式

把地址换为ip:8080/index.html
草料网站在这个网站中生成二维码
用手机扫一扫

2.目录结构

src/common/stylus
├── base.styl
├── icon.styl
├── index.styl
└── mixin.styl

3.编写base.styl,icon.styl,index.styl,mixin.styl代码的编写

base.styl代码的编写

<!--根据媒体查询@media设置不同的缩放比例(transform 的 scale)来修复1像素边框的问题-->
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .border-1px
  <!--使用伪元素::after--> 
    &::after