stylus相關和1像素邊框問題

1像素邊框問題

1像素邊框問題其實就是Dpr的比例問題,例如 Retina屏設置1px邊框，實際顯示2px,由於Dpr是2,因此會顯示爲2px

網上有不少方法:7 種方法解決移動端 Retina 屏幕 1px 邊框問題

目前這裏用的是僞元素 + transform 實現:

僞元素:總結僞類與僞元素

::after 在某元素以後插入某些內容
::before 在某元素以前插入某些內容

原理是利用 :before 或者 :after 重作 border,而且根據媒體查詢設置不一樣的縮放比例(transform 的 scale)
具體操做會在stylus裏面實現

stylus相關

• 使用stylus的寫法,經過縮進表示層次與嵌套關係

  • 使用mixins方法來更方便的組件化css,相關寫法能夠參考:官網的mixins

建立/sell/src/common/stylus這個目錄,用來存放stylus相關的文件

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

如下分別是四個文件的代碼(名字只是爲了區分不一樣的做用):

base.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之間的手機型號

mixin.styl

//這裏是負責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文件的文件夾下.

icon.styl

這個實際上是用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"

index.styl

使用一個主的styl來包含全部的stylus文件

@import "./icon" 
@import "./mixin"
@import "./base"