일부 Android 인스턴스와 호환되도록 CSS에 svg를 도입합니다.-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

일부 Android 인스턴스와 호환되도록 CSS에 svg를 도입합니다.

小云云

Feb 24, 2018 am 09:53 AM

css예

이 기사에서는 0.5px 테두리를 표시하는 일부 Android 기기와 호환되도록 CSS에 svg를 도입하는 예에 대한 관련 정보를 주로 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로 지금 공유하고 다음과 같이 제공합니다. 참조. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

머리말

H5 페이지를 개발할 때 일부 Android 기기의 기본 브라우저가 0.5px 테두리와 호환되지 않는 것을 발견했습니다. 이는 매우 혼란스러운 코드입니다.

input {
  border-bottom: 0.5px solid #DCDCDC;
}

사용하세요. rem 개선

나중에 rem을 사용하려고 생각했는데 H5 페이지가 타오바오 모바일의 반응형 픽셀을 차용하고 루트 요소의 글꼴 크기를 모바일 기기의 dpi에 맞게 설정했기 때문에 거의 모든 px가 rem으로 변경되었습니다. 단위로서 이는 모바일 측면에서 반응성 픽셀을 더 잘 달성하고 Retina 화면에서 성능을 더 잘 달성할 수 있습니다. 코드는 다음과 같습니다.

input {
  /* 47 是页面根元素的 font-size 大小 */
  border-bottom: calc(1rem/47) solid #DCDCDC;
}

테스트에서 일부 모델은 완벽하게 표시되었지만 일부는 여전히 표시되지 않았습니다. 인터넷에는 의사 요소(before 및 :after)를 사용하여 1px를 수행할 수 있다는 게시물이 있습니다. 성능을 확인한 다음 변환을 사용하십시오. scaleY( 0.5); 높이를 조정하는 아이디어는 매우 좋지만 입력 요소는 의사 요소를 지원하지 않습니다.

마침내 좋은 방법을 찾았습니다: CSS에서 svg를 사용하는 것입니다!

개선을 위해 CSS에 svg를 도입하세요.

구체적인 아이디어는 배경 이미지를 요소에 추가한 다음 svg를 이미지 유형으로 설정하는 것입니다. 왜냐하면 svg의 1px는 실제로 1개의 물리적 픽셀만 차지하기 때문입니다.

구현은 매우 간단합니다. 코드는 다음과 같습니다.

input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=&#39;http://www.php.cn/2000/svg&#39; width=&#39;100%&#39; height=&#39;100%&#39;><line x1=&#39;0&#39; y1=&#39;100%&#39; x2=&#39;100%&#39; y2=&#39;100%&#39; stroke=&#39;#dcdcdc&#39; stroke-width=&#39;1&#39;/></svg>") ;
}

문제는 여기서 끝나지 않습니다. PHP 코드를 사용하여 svg xml 코드를 base64 형식으로 변환하고 다시 시도하세요.

<?php
  echo base64_encode("<svg xmlns=&#39;http://www.php.cn/2000/svg&#39; width=&#39;100%&#39; height=&#39;100%&#39;><line x1=&#39;0&#39; y1=&#39;100%&#39; x2=&#39;100%&#39; y2=&#39;100%&#39; stroke=&#39;#dcdcdc&#39; stroke-width=&#39;1&#39;/></svg>");
?>

출력은 다음과 같습니다:

PHN2ZyB4bWxucz0naHR0c DovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPjxsaW5lIH gxPScwJyB5MT0nMTAwJScgeDI9JzEwMC UnIHkyPScxMDAlJyBzdHJva2U9JyNkY2RjZGMnIHN0cm9 rZS13aWR0aD0nMScvPjwvc3ZnPg= =

CSS의 배경 이미지에 다시 도입되었습니다. (원래 utf8을 base64로 변경해야 합니다.)

input {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPjxsaW5lIHgxPScwJyB5MT0nMTAwJScgeDI9JzEwMCUnIHkyPScxMDAlJyBzdHJva2U9JyNkY2RjZGMnIHN0cm9rZS13aWR0aD0nMScvPjwvc3ZnPg==") ;
}

관련 기사