브라우저 뷰포트
브라우저 프레임 안의 iframe에서 실제 문서 크기를 조절합니다.
반응형 프리셋
Responsive button
The presets cross the sm breakpoint inside the iframe. The padding readout comes from the real computed style.
참조 견본
레퍼런스 데모는 필요한 시스템 역할과 프리셋 토큰을 사용해 격리된 문서를 컴파일합니다.
고정 너비 또는 유동 너비 설정
점선 윤곽은 작성한 포함 블록입니다. 파란색 테두리 상자의 실제 너비를 부모 요소와 함께 확인하세요.
사용 위치: 반응형 디자인 가이드.
사용법과 인터페이스
DemoViewport는 사이트에서 작성한 전체 문서(document)나 사이트 URL(src)을 div.ui-browser 안의 실제 iframe에 표시합니다. 뷰포트 자체가 학습 대상일 때만 브라우저 프레임을 표시합니다. responsive(또는 chrome)는 주소 없이 창 점이 있는 막대를 추가하고, 트레이 머리글은 문서 이름을, 범위 입력 옆은 현재 너비를 표시합니다. 나머지 미리보기는 data-variant="plain"으로 프레임 없는 스테이지를 트레이 색조로 구분합니다. responsive는 너비 프리셋(widthPresets), ui-range, Fit도 추가합니다. theme, motion, print는 필요한 컨트롤만 추가하고 inspect는 [data-target] 요소의 계산된 속성을 읽습니다.
<Demo title="Responsive specimen" frame="none" caption="Cross sm inside the iframe."> <DemoViewport title="Responsive specimen" document={html} responsive widthPresets={[{ label: 'Below sm', width: 833 }, { label: 'At sm', width: 835 }]} height={180} /></Demo><div class="ui-browser"> <div class="ui-browser-bar" aria-hidden="true"><span class="ui-browser-dots">…</span></div> <div class="ui-browser-body"><div class="ui-browser-viewport"><iframe …></iframe><span class="ui-resize"></span></div></div> <div class="ui-browser-tools" role="group">… <output class="ui-browser-size">835 px</output> …</div></div>중단점 너비는 활성 프리셋에서 가져오세요. 위 숫자는 현재 sm 경계를 보여 주는 예입니다. 페이지보다 넓은 프리셋은 브라우저 본문 안에서 스크롤됩니다. 가장자리 핸들은 포인터 조작의 지름길이며 키보드 조작은 범위 입력이 담당합니다.