모바일 단말기에서 1px 테두리 효과를 만드는 방법

이번에는 모바일 단말기에서 1px 테두리 효과를 만드는 방법을 알려드리겠습니다. 모바일 단말기에서 1px 테두리 효과를 만들 때 주의해야 할 주의사항은 무엇인가요? 보세요.

Background

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: dc6dce4a544fdca2df29d5ac0ea9906b를 사용하여 테두리 구현

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요.

관련 자료:

ES6의 집합 데이터 구조와 맵 데이터 구조

ES6의 새로운 숫자 판단에 대한 자세한 설명

CommonJS 및 es6 사양 도입 및 내보내기

위 내용은 모바일 단말기에서 1px 테두리 효과를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!