재단 CSS 가시성

디스플레이 소자의 화면 크기에 따라

다음 클래스는 디스플레이 소자 장치 (화면 크기)에 기초한다.

다음의 예는 위의 모든 보여줍니다 .show- 가시성 클래스를.

<p class="show-for-small-only">你在小型设备上。</p>
<p class="show-for-medium-up">你在中型、大型、更大型、超大型的设备上。</p>
<p class="show-for-medium-only">你在中型设备上。</p>
<p class="show-for-large-up">你在大型、更大型、超大型的设备上</p>
<p class="show-for-large-only">你在大型设备上。</p>
<p class="show-for-xlarge-up">你在更大型、超大型的设备上。</p>
<p class="show-for-xlarge-only">你在更大型设备上。</p>
<p class="show-for-xxlarge-up">你在超大型设备上。</p>

»시도

화면 크기 숨겨진 소자에 따르면

다음 클래스는 요소를 숨길 수있는 장치 (화면 크기)를 기반으로합니다.

<p class="hide-for-small-only">你不在小型设备上。</p>
<p class="hide-for-medium-up">你不在中型、大型、更大型、超大型的设备上。</p>
<p class="hide-for-medium-only">你不在中型设备上。</p>
<p class="hide-for-large-up">你不在大型、更大型、超大型的设备上。</p>
<p class="hide-for-large-only">你不在大型设备上。</p>
<p class="hide-for-xlarge-up">你不在更大型、超大型的设备上。</p>
<p class="hide-for-xlarge-only">你不在更大型设备上。</p>
<p class="hide-for-xxlarge-up">你不在超大型设备上。</p>

»시도

화면 방향에 따라 디스플레이 요소

다음 클래스는 요소를 숨길 수있는 장치 (화면 크기)를 기반으로합니다.

우리는 표시하거나 숨길 여부, 다른 방향으로 요소를 설정할 수 있습니다. 노트북 일반적으로 수평 다른 데스크톱 장치,하지만 휴대 전화 및 태블릿 기기는 우리가 숨기고 방향을 얻을 수있는 사용자의 휴대 전화에 따라 요소를 표시 할 수 있습니다, 수평 또는 수직이 될 수 있습니다 :

다음의 예에서는, 사용하는 방향에 따라 상기 텍스트의 내용을 보여준다 :

터치 스크린 디스플레이 장치 및 숨기기

당신은 장치가 숨겨진 요소를 표시하는 터치를 지원하는지 여부에 따라 할 수 있습니다.

장치가 텍스트를 표시하는 터치를 지원하는지 여부에 따라 다음 예 :