내 RWD 중단 점을 SASS의 변수로 설정하고 있습니다 $bp-medium: 48em;( 예 : 1em = 16px 일 때 768px에 해당). 또한 그보다 1px 적은 변수를 설정하고 해당 변수의 값을 ems로 설정하여 중단 점이 사용자의 기본 크기 기본 설정을 계속 존중하도록하고 싶습니다 .
SASS는 확실히 계산 도구를 제공하지만, 제가 시도한 모든 방법은 사용자가 브라우저의 기본 글꼴 크기를 설정 한 픽셀 수에 대한 가정을해야합니다. 예를 들면 :
$bp-medium-1: ($bp-medium/1em)*16px-1px;
… $ bp-medium-1에 767px의 값을 제공합니다 (결과가 px로 표시되므로 모든 옵션 중에서 가장 나쁨).
$bp-medium-1: $bp-medium - (1em/16);
… 이것은 $ bp-medium-1에 47.9375em의 값을 제공합니다. 적어도 결과는 지금 ems에 있기 때문에 더 좋습니다. 그러나 저는 계산에서 '16'을 다시 가정해야했습니다.
요약하자면 : 16px / em 기본 크기를 가정 할 필요없이48em - 1px 최종 결과가 ems 인 작업을하고 싶습니다 .
할 수 있습니까?
아니 당신은 할 수 없습니다. em 및 px와 같이 호환되지 않는 단위로 산술 연산을 수행 할 수있는 유일한 방법 calc()은 CSS (Sass 아님) 를 통하는 것이며 미디어 쿼리에서는 허용되지 않습니다 .
특정 값보다 작은 가능한 가장 큰 10 진수 (정밀도 설정에 따라)를 사용할 수 있습니다 .
// default precision in Sass is 5 decimal places
// go any bigger and Sass will round up
@media (max-width: 34.99999em) {
body {
background: red;
}
}
@media (min-width: 35em) {
body {
background: green;
}
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다