CSS를 사용하는 증분 패딩?

CSS를 사용하여 증분 채우기를 할 수있는 방법이 있습니까? 예 : 후자가 x와 y 차원 사이에있을 때 뷰포트를 기준으로 패딩 증가량을 X 픽셀 씩 차지합니까?CSS를 사용하는 증분 패딩?

@media를 사용하면 첫 번째 중단 점에서만 작동하지만 패드를 점진적으로 변경해야합니다.

2016-06-24 NDG

가 왜 첫 번째 중단 점에 대한 작동 하는가 (당신은 또한 vw와 함께 픽셀 값을 사용하여 calc을 사용할 수 있습니다)? 필요에 따라 미디어 쿼리를 계속 설정할 수 있습니다. [JS 피들] (https://jsfiddle.net/7vsyv33c/) –

고맙습니다. 뷰포트가 540px와 500px 사이에서 축소되어 모든 픽셀에 대해 한 픽셀 씩 변경되도록 패딩이 필요하므로 40 개의 @media 규칙이 필요합니다. 나는 마진을 사용하여 이것이 더 잘 이루어질 수 있다는 것을 깨닫고 있지만 그런 일이 가능할 지 궁금해하고있었습니다. – NDG

패딩에 vw 또는 vh 단위를 사용할 수 있습니다.이 값은 뷰포트를 기준으로합니다. 예를

div { 
    padding: 2.5vw; 
}

를 들어

참조 http://codepen.io/anon/pen/QEdgeX

출처

2016-06-24 21:48:36 Johannes

CSS를 사용하는 증분 패딩?

답변

관련 문제