지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

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

php中世界最好的语言
풀어 주다： 2018-03-10 15:19:47
원래의
2122명이 탐색했습니다.

이번에는 모바일 단말기에서 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:

를 사용하여 테두리 구현

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

관련 자료:

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

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

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

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

관련 라벨：
效果 边框
원천：php.cn
이전 기사：배열 순서를 방해하는 js에 대한 자세한 설명 다음 기사：JS 버블정렬과 퀵정렬에 대한 자세한 설명
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
URL 매개변수에서 얻은 PHP 배열이 예상대로 작동하지 않습니다. 카테고리 ID가 포함된 URL 매개변수가 있고 이를 다음과 같은 배열로 처리하려고 합니다. http://example.com?cat[]=3,9,13 PHP에서는 ...
에서 2024-04-06 22:09:02
0
1
1428
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
결과 집합에서 가장 낮은 값만 표시하는 방법(MYSQL) 나는 다음과 같은 진술을 가지고 있습니다 : selectDATE(recieved_on)asDay,round(count(*)/24)AS'average'frommes...
에서 2024-04-06 21:44:19
0
1
603
3단계 계층구조의 맞춤 분류를 사용하여 우커머스 관련 상품을 선택하세요. 나는 "스포츠"라는 사용자 정의 분류를 가진 wooCommerce 상점을 가지고 있습니다. 분류에는 부모, 어린이, 어린이의 세 가지 수준이 있...
에서 2024-04-06 20:05:30
0
1
544
MySQL: "<여기 변수 또는 하위 쿼리>로...에서 텍스트 선택" 다음 데이터가 포함된 다음 테이블이 있습니다. id 텍스트 언어 1 독일어 텍스트 독일어 2 영어 텍스트 영어 내가 원하는 것은 다음 형식의 결과를 얻는 것입니다...
에서 2024-04-06 19:25:54
0
2
529
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿