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

今回は、モバイル端末で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 サイトの他の関連記事に注目してください。

関連書籍:

ES6のセットデータ構造とマップデータ構造

ES6の新しい数値判定の詳細説明

CommonJSとes6仕様の導入とエクスポート

以上がモバイル端末で1pxのボーダー効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。