移动端开发过程中，因为手机的dpr(设备像素比不同)，我们需要根据dpr来修改图标的大小:
1.通过mixin,动态修改图标的背景图片。通过@media (媒体查询)，判断设备的dpr。
`@mixin bg-image(<article class="baidu_pl" style="box-sizing: inherit; outline: 0px; margin: 0px; padding: 16px 0px 0px; display: block; position: relative;"`url``) {`
`background-image``: ``url``(<article class="baidu_pl" style="box-sizing: inherit; outline: 0px; margin: 0px; padding: 16px 0px 0px; display: block; position: relative;"`url` `+ ``"@2x.png"``);`
`@media (-webkit-min-device-pixel-ratio: ``3``),(min-device-pixel-ratio: ``3``) {`
`background-image``: ``url``(<article class="baidu_pl" style="box-sizing: inherit; outline: 0px; margin: 0px; padding: 16px 0px 0px; display: block; position: relative;"`url` `+ ``"@3x.png"``);`
`}`
`}`
|
2.css样式中调用 bg-image 方法
`div{`
`width``:``30px``;`
`height``:``20px``;`
`background-``size``:``30px` `20px``;`
`background-repeat``:``no-repeat``;`
`@include bg-image(``'special_1'``); `
`}`
|
移动端 border 的 1px 问题：
1.为了方便通用，使用 mixin 定义一个函数。
|
`@mixin border``-1px``($color) {`
`position``: ``relative``;`
`&:after{`
`display``: ``block``;`
`position``: ``absolute``;`
`left``: ``0``;`
`bottom``: ``0``;`
`width``: ``100%``;`
`border-top``: ``1px` `solid` `$color;`
`content``: ``' '``;`
`}`
`}`
|
2.对 伪类 :after 进行缩放，以适应不同 dpr 的手机。通过 @media (媒体查询)，来确定 设备的 dpr。 为了方便调用，定义一个全局的 class (此处为 border-1px)
`// 判断在不同dpr下的显示情况`
`@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.html/css样式调用.
html:
`<``div` `class="tab border-1px">`
`<``div` `class="tab-item">`
`<``a` `v-link="{path:'/goods'}">商品</``a``>`
`</``div``>`
`<``div` `class="tab-item">`
`<``a` `v-link="{path:'/ratings'}">评价</``a``>`
`</``div``>`
`<``div` `class="tab-item">`
`<``a` `v-link="{path:'/seller'}">商家</``a``>`
`</``div``>`
`</``div``>`
|
css:
`.tab{`
`display``: flex;`
`width``: ``100%``;`
`height``: ``40px``;`
`line-height``: ``40px``;`
`@include border``-1px``(rgba(``7``,``17``,``27``,``0.1``));`
`}`
|
</article>
网友评论