1像素边框问题其实就是Dpr的比例问题,例如 Retina屏设置1px边框,实际显示2px,由于Dpr是2,因此会显示为2pxcss
网上有不少方法:7 种方法解决移动端 Retina 屏幕 1px 边框问题html
目前这里用的是伪元素 + transform 实现:vue
伪元素:总结伪类与伪元素webpack
::after 在某元素以后插入某些内容 ::before 在某元素以前插入某些内容
原理是利用 :before 或者 :after 重作 border,而且根据媒体查询设置不一样的缩放比例(transform 的 scale)
具体操做会在stylus里面实现web
使用stylus的写法,经过缩进表示层次与嵌套关系shell
使用mixins方法来更方便的组件化css,相关写法能够参考:官网的mixinssvg
建立/sell/src/common/stylus
这个目录,用来存放stylus相关的文件组件化
src/common/stylus ├── base.styl ├── icon.styl ├── index.styl └── mixin.styl
如下分别是四个文件的代码(名字只是为了区分不一样的做用):布局
<!--这里是对于使用reset.css以后的一些自定义的默认的css初始化--> <!--字体是一些移动端比较流行的字体,因此这里使用--> <!--其余都是为了方便开发,避免css的属性继承影响模块的代码--> body, html line-height: 1 font-weight: 200 <!--设置一些移动端的经常使用的字体--> font-family: 'PingFang SC', 'STHeitiSc-Light', 'Helvetica-Light', Arial, sans-serif <!--根据媒体查询@media设置不一样的缩放比例(transform 的 scale)来修复1像素边框的问题--> @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) .border-1px <!--使用伪元素::after--> &::after <!--dpr是1.5的时候缩放0.7倍--> -webkit-transform: scaleY(0.7) transform: scaleY(0.7) @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) .border-1px &::after <!--dpr是2的时候缩放0.5倍--> -webkit-transform: scaleY(0.5) transform: scaleY(0.5)
这里的修复1像素边框问题会拆分为2个部分,一个部分是这里的base.styl里面处理缩放,另一部分是在mixin.styl里面处理重作border字体
这里是一个base模块文件,只保留了基本的共用的css,须要结合其余的css文件(stylus)来合并理解
dpr通常是1或者2,1.5只是为了更精细的去适配1和2之间的手机型号
//这里是负责1像素边框问题 border-1px($color) //stylus的mixins语法支持传入变量 position: relative //建立相对定位布局,为after和before的border的绝对布局作定位 &::after //使用伪元素::after,在元素以后插入内容 display: block position: absolute left: 0 bottom: 0 width: 100% //须要横向撑开边框宽度 border-top: 1px solid $color //由于是在元素以后插入,因此是用上边框 content: ' ' //after或者before使用的时候,不传入东西也要填一个空字符串 //这里是负责图片的不一样dpr下显示高清问题 bg-image($url) //这是图片的mixin,也是相似,不过这里是图片根据dpr来进行适配 background-image: url($url + "@2x.png") @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) background-image: url($url + "@3x.png")
这里的border-1px($color)
就是真正处理1像素边框问题的关键,经过伪元素after重作border,而且支持传入颜色变了$color
来自定义颜色
这里的bg-image($url)
是负责处理图片在不一样dpr下显示的问题,原来跟1像素边框问题差很少,不过这里不须要重作,只是根据不一样的media query来调用不一样的图片显示,而这些图片是须要放在相对于的文件夹的,在这个项目的话,是放在.vue文件的文件夹下.
这个实际上是用icomoon生成的icon样式文件,经过将小图片转为字体,而后经过css样式调用,这样作的目的能够减小小图片的http请求,也方便管理和使用这些小图片,例如能够直接使用某个图片的class就能够调用该图片
<!--这个其实就是以前图标字体生成的css文件改过来的--> <!--由于使用webpack打包的关系,须要修改一下url路径,这个按照当前目录查找到文件就能够了--> @font-face font-family: 'sell-ico' src: url('../fonts/sell-ico.eot?gr00o7') src: url('../fonts/sell-ico.eot?gr00o7#iefix') format('embedded-opentype'), url('../fonts/sell-ico.ttf?gr00o7') format('truetype'), url('../fonts/sell-ico.woff?gr00o7') format('woff'), url('../fonts/sell-ico.svg?gr00o7#sell-ico') format('svg') font-weight: normal font-style: normal [class^="icon-"], [class*=" icon-"] /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'sell-ico' !important speak: none font-style: normal font-weight: normal font-variant: normal text-transform: none line-height: 1 /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased -moz-osx-font-smoothing: grayscale .icon-arrow_lift:before content: "\e900" .icon-thumb_up:before content: "\e901" .icon-thumb_down:before content: "\e902" .icon-shopping_cart:before content: "\e903" .icon-favorite:before content: "\e904" .icon-check_circle:before content: "\e905" .icon-close:before content: "\e906" .icon-remove_circle_outline:before content: "\e907" .icon-add_circle:before content: "\e908" .icon-keyboard_arrow_right:before content: "\e909"
使用一个主的styl来包含全部的stylus文件
@import "./icon" @import "./mixin" @import "./base"