モバイル端末で1pxのボーダー効果を作成する方法-jsチュートリアル-php.cn

モバイル端末で1pxのボーダー効果を作成する方法

php中世界最好的语言

リリース： 2018-03-10 15:19:47

オリジナル

1992 人が閲覧しました

今回は、モバイル端末で1pxのボーダー効果を作成する方法を説明します。モバイル端末で1pxのボーダー効果を作成するときに注意する必要がある注意点は何ですか。実際のケースを見てみましょう。見てください。

背景

vue.js でスタイラスを使用して 1 ピクセルの境界線を実装する CSS スタイル属性

border-

bottom

を使用して境界線を実装すると、PC ブラウザーには 1 ピクセルの境界線が表示されます。 (細い線 1 本) ただし、モバイルデバイスでは DPI 値が大きいほど、画面が鮮明になります。この特性を利用すると、モバイルデバイス上では非常に太い線になります。

実装方法

方法1:

擬似クラス位置決め+拡大縮小

1.まずボーダーで描画する要素に擬似クラスを定義します

絶対位置決めで1ピクセルを描画します。擬似クラス境界線は要素の下に配置されます。これは下部境界線です

border-1px($color)  position: relative
  &:after
    display: block    position: absolute    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color    content: ' '

ログイン後にコピー

2。デバイスの最小 DPI に基づいて縦軸を比例的にスケールします。

@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)

ログイン後にコピー

方法 2:

を直接使用してボーダーを実装する

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。