最近学了一下vue的实战课程,学习到了其中的一个页面设计技巧,觉得深有感触,于是便写个博客记录下来,以便下次查阅
项目中是通过vue+stylus来实现的,那么首先需要说一下实现原理,因为在移动端中物理像素是设备像素的两倍,那么以平时在pc端中设计的1px ,在移动端设备中就是2px了,那么,我们要实现移动端的1px边框,就需要对这个1px边框进行缩放。
假如我们有一个div,我们要设置它在移动端中的1px下边框,那么我们可以这么做
html部分:
<div class="box border-1px"></div>
stylus部分:
.box
width 100%
height 40px
position relative
&:after
display block
width 100%
position absolute
left 0
bottom 0
border-top 1px solid rgba(7,17,27,0.1)
content ' '
//使用媒体查询像素比,进行边框缩放
@media (-webkit-min-device-pixel-ratio:1.5), (min-device-pixel-ratio:1.5)
.border-1px
&::after
-webkit-transform scaleY(0.7)
transform scaleY(0.7)
@media (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2)
.border-1px
&::after
-webkit-transform scaleY(0.5)
transform scaleY(0.5)
如果需要多处使用一像素边框,则讲媒体查询部分抽出来成一个单独的文件即可,哪里需要就在哪里引入