CSS-모바일 1 픽셀 솔루션

머리말: 모바일 웹 개발에서 UI 디자인 초안에는 테두리가 1 픽셀로 설정되어 있고, 프런트엔드는 개발 과정에서 border:1px 가 나타나면 일부 모델에서는 1px 가 굵다는 것을 알 수 있습니다. 즉, 일반적인 모바일 1px 픽셀 문제입니다. < P > 이 문제를 해결하려면 먼저 장치의 물리적 픽셀 [장치 픽셀] & 논리 픽셀 [CSS 픽셀];

1. 물리적 픽셀: < P > 모바일 장치는 공장에서 출하될 때 서로 다른 장치에 포함된 서로 다른 픽셀을 하드웨어 픽셀이라고도 합니다.

2. 논리 픽셀:

는 CSS 에 기록된 픽셀입니다. < P > 개발 중 이동측 CSS 에 1px 가 적혀 있는 이유는 실제로 1px 보다 두껍게 보입니다. 장치의 물리적 픽셀과 논리적 픽셀을 이해하는 학생들은 쉽게 이해할 수 있어야 한다. 사실 이 두 px 의 의미는 사실 다르다. UI 디자이너가 요구하는 1px 는 장치의 물리적 픽셀 1px 를 가리키고, CSS 에 기록된 픽셀은 논리적 픽셀이며, 이들 사이에는 비례관계가 있다. 일반적으로 JavaScript 의 window.devicePixelRatio 를 사용할 수 있다 물론 비율은 장비와 관련이 있습니다. < P > 휴대폰에서 border 는 우리가 원하는 효과를 얻을 수 없다. 이는 devicePixelRatio 특성 때문에 iPhone 의 devicePixelRatio==2, border-width: 1px; 장치 독립 픽셀을 설명하므로 border 는 물리적 픽셀 2px 디스플레이로 확대되어 아이폰에서 두껍게 보입니다.

● 사용:: after 및:: befor, border-bottom：1px solid # 을 설정한 다음-WebKit-transform: scall 을 배율 조정합니다 두 개의 가장자리를 실현할 수 있는 요구 사항

● 사용:: after 설정 border：1px solid #; 폭: 2%; 높이: 2%, 배율 조정 scaleY(.5); 장점은 모깍기를 실현할 수 있고, 징둥 이렇게 실현되는데, 버튼이 active 를 추가하는 것이 번거롭다는 단점이 있다.

上篇: GB 의 섬 모험 下篇: ho은(는) 무슨 뜻이며 영어로 어떻게 발음하나요?