Latest web development tutorials

Fundação visibilidade CSS

De acordo com o tamanho de tela de elementos de exibição

As seguintes classes irá basear-se no dispositivo (tamanho do ecrã) para o elemento de afixação.

categoria descrição
.Show-para-pequeno-only Somente exibir elementos em um pequeno dispositivo (tela de largura inferior a 40.0625em)
.Show-para-médio-up Elementos de visualização nos dispositivos médio e superior (ecrã de dimensão superior a 40.0625em)
.Show-para-meio-only Mostrar apenas no elemento de dispositivo de tamanho médio (largura da tela entre 40.0625em para 64.0625em)
.Show-de-large-up Em equipamentos de grande porte e mais elementos de visualização (tela de dimensão superior a 64.0625em)
.Show-de-large-only Só exibido no grande elemento equipamento (largura da tela entre 64.0625em para 90.0625em)
.Show-for-xlarge-up Elementos de indicação sobre a maior e mais equipamentos (ecrã de dimensão superior a 90.0625em)
.Show-for-xlarge-only Só é apresentado nos elementos maiores e mais equipamento (largura da tela entre 90.0625em para 120.0625em)
.Show-for-XXLarge-up Na grande equipamentos e mais elementos de exibição (tela de dimensão superior a 120.0625em)

O exemplo a seguir demonstra todos os itens acima .show- classe visibilidade. 

<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>

tente »

De acordo com o elemento oculto tamanho da tela

As seguintes classes serão baseados no dispositivo (tamanho da tela) para ocultar elementos.

categoria descrição
.hide-para-pequeno-only Apenas ocultar elementos em um pequeno dispositivo (tela de largura inferior a 40.0625em)
.hide-para-médio-up Esconder elementos nos dispositivos médio e superior (ecrã de dimensão superior a 40.0625em)
.hide-para-meio-only Apenas ocultar elementos em um dispositivo de médio porte (largura da tela entre 40.0625em para 64.0625em)
.hide-de-large-up Ocultar elementos em grande e mais equipamentos (ecrã de dimensão superior a 64.0625em)
.hide-de-large-only Apenas ocultar elementos em equipamentos de grande porte (largura da tela entre 90.0625em para 64.0625em)
.hide-for-xlarge-up No maior e mais equipamentos elemento oculto (ecrã de dimensão superior a 90.0625em)
.hide-for-xlarge-only Only (90.0625em largura da tela entre 120.0625em) elemento oculto na maior e mais equipamentos
.hide-for-XXLarge-up elemento oculto no amplo e mais equipamentos (ecrã de dimensão superior a 120.0625em) 
<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>

tente »

Elementos de visualização de acordo com a orientação da tela

As seguintes classes serão baseados no dispositivo (tamanho da tela) para ocultar elementos.

Podemos definir um elemento em direções diferentes, se deseja mostrar ou ocultar. Laptops e outros dispositivos de desktop geralmente horizontais, mas telefones celulares e tablets pode ser horizontal ou vertical, podemos nos esconder e exibir o elemento de acordo com o telefone móvel do usuário para obter direcções:

categoria descrição
.Show-for-paisagem elementos de exibição na transversal (hide longitudinal)
.Show-de-retrato elementos de exibição (lateral oculta) na orientação retrato

O exemplo a seguir mostra o conteúdo do texto de acordo com a direcção de utilização:

Exemplos

<P class = "show-para -Paisagem"> texto aparece somente no sentido transversal. </ P>
<P class = "show-para -Retrato"> Só texto no retrato. </ P>

tente »

dispositivo de ecrã táctil e se esconder

Você pode consoante o dispositivo suporta toque para exibir elemento oculto.

categoria descrição
.Show-para-touch Exibido em um suporte de dispositivo de tela de toque (não suportado em dispositivos ocultos)
.hide-para-touch Em dispositivos de toque apoio oculto (não exibido em dispositivos suportados)

Os exemplos a seguir de acordo com se o dispositivo suporta toque para exibir o texto:

Exemplos

<P class = "show-para -touch"> O dispositivo suporta tela de toque. </ P>
<P class = "hide-para -touch"> O dispositivo não suporta tela de toque. </ P>
tente »