다중 최소 너비 vw 및 px 값을 갖는 Srcset.

Question

sizes 속성에 문제가 있습니다. 나는 얼마 전에 어느 크기의 선언을해야하는지에 대해 a question 전에 Yoav와 Yoav가 선언해야한다고 말했다.

"크기 값은 가장 좁은 중단 점에서 시작하여 점차 넓은 점으로 이동해야하므로 귀하의 경우에는 최소 너비 : 62.5em) 25vw, (최소 너비 : 30em) 50vw, 100vw

그렇지 않으면 망막 화면을 사용할 경우 어떤 이미지를 찍을 지 결정할 때 화면의 DPR도 고려됩니다 . "

이것은 의미가 있지만이 상황에서는 어떻게됩니까? 휴대 전화에서 100vw의 이미지를 가지고 있지만 콘테이너에 max-width: 380px의 이미지가 있다고 가정 해보십시오. 지금까지 저와 함께

sizes="(min-width: 380px) 380px, 100vw"

: 나는 이런 짓을 했을까? 시원한. 700px에서 레이아웃이 2 열로 바뀌므로 이미지가 50vw가되도록하십시오. 그래서 이렇게 것이다 :

sizes"(min-width: 700px) 50vw, (min-width: 380px) 380px, 100vw"

그러나, 기술적으로에게 최소 폭 : 화상이 최소 폭보다도 작다 700 픽셀 : 380px 값 2분의 700 = 350px 그래서 순서 이제 있어야하기 때문에 :

sizes"(min-width: 380px) 380px, (min-width: 700px) 50vw, 100vw"? 가 1024px에서 다음

는 1200 픽셀의 레이아웃 3 열을 변경하고, 외부 용기는 더 이상 확장에서 레이아웃을 중지, 그래서 나는 이런 식으로 뭔가 싶어 :

sizes"(min-width: 1220px) 380px, (min-width: 1024px) 33vw, (min-width: 700px) 50vw, (min-width: 380px) 380px, 100vw"

이 정확을?

Answer 1

순서는 미디어 쿼리 값과 "방향"(최소 너비 또는 최대 너비)에 따라 다릅니다. 이미지의 실제 크기는 중요하지 않습니다. 당신의 예에서

: 브라우저가 첫 번째 유효한 미디어 쿼리를 발견하면 읽기를 정지하기 때문에

sizes"(min-width: 380px) 380px, (min-width: 700px) 50vw, 100vw" 

(min-width: 700px) 50vw는 사용되지 않습니다.

여기에서 예를 들어 800px의 뷰포트가있는 경우 min-width: 380px이 true이므로 거기서 중지합니다.

더 모바일 첫째,이 (max-width으로) 시도 쓰고 싶은 경우

:

sizes"(max-width: 380px) 100vw, (max-width: 700px) 380px, 50vw" 

우리가 min-width 미디어 쿼리 모바일 최초의 CSS를 쓰기 때문에 카운터 직관적입니다.

HTH