在这里我只介绍下边框的实现:
当样式像素一定时,因手机有320px,640px等.各自的缩放比差异,所以设备显示像素就会有1Npx,2Npx.为保设计稿还原度,解决就是用media + scale.
实现原理:伪类+缩放
工具:stylus预编译器
1、在 stylus文件夹中创建mixin.styl文件,内容如下:(即通过伪类+子绝父相 实现1px的下边框,这只是开始,并没有结束 )
border-1px($color)
position: relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-top:1px solid $color
content: ' '
2、在 stylus文件夹中创建base.styl文件,内容如下:(根据设备的dpr确定y轴的缩放比例)
@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)
3、在 stylus文件夹中创建index.styl文件,内容如下:(其中的icon为图标字体的样式)
@import './mixin' @import './icon' @import './base'
4、在main.js中引入
// 相同不加./绝对路径引用去webpack.base.conf.js配置 'common':path.resolve(__dirname,'../src/common')
import 'common/stylus/index.styl'