192 lines
6.8 KiB
Markdown
192 lines
6.8 KiB
Markdown
---
|
|
title: Breakpoints
|
|
localeTitle: Pontos de interrupção
|
|
---
|
|
## Visão geral
|
|
|
|
Um ponto de interrupção CSS é um ponto específico no qual o layout de um site é alterado, com base em uma [consulta de mídia](https://guide.freecodecamp.org/css/css3-media-queries) tornando-se ativo.
|
|
|
|
Geralmente, você especifica um ponto de interrupção quando deseja readaptar o layout do site ao tamanho da porta de visualização do navegador; principalmente, para a largura da janela de visualização.
|
|
|
|
Por exemplo, se o conteúdo do seu site estiver ótimo em uma viewport estreita (como em um navegador de smartphone), mas ele começar a ficar ruim em telas maiores (por exemplo, talvez o tamanho das fontes seja muito pequeno e difícil de ler), talvez queira introduzir um novo ponto de interrupção para telas maiores que aumentem as fontes:
|
|
|
|
Pontos de interrupção CSS podem ser considerados como o coração do webdesign responsivo, pois definem como o conteúdo se comporta ou é organizado em uma largura / escala de dispositivo diferente, permitindo que você mostre o melhor layout possível para o usuário.
|
|
|
|
|
|
|
|
## Definindo Pontos de Quebra
|
|
|
|
Os pontos de interrupção são amplamente definidos com base em um dos itens a seguir.
|
|
|
|
* Pontos de interrupção baseados na largura do dispositivo.
|
|
* Pontos de interrupção baseados em conteúdo.
|
|
|
|
### Pontos de interrupção baseados na largura do dispositivo
|
|
|
|
É evidente que todos os nossos dispositivos não possuem tamanhos / larguras de tela iguais. Agora é uma decisão de design incluir um conjunto de dispositivos específicos e codificar as regras de css de acordo. Já temos dispositivos suficientes para nos preocupar, e quando um novo sai com uma largura diferente, voltar ao seu CSS e adicionar um novo ponto de interrupção novamente é demorado.
|
|
|
|
Aqui está um exemplo
|
|
```
|
|
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
|
|
|
|
/* Portrait */
|
|
|
|
@media only screen
|
|
|
|
and (min-device-width: 375px)
|
|
|
|
and (max-device-width: 667px)
|
|
|
|
and (-webkit-min-device-pixel-ratio: 2)
|
|
|
|
and (orientation: portrait) {
|
|
|
|
}
|
|
|
|
/* Landscape */
|
|
|
|
@media only screen
|
|
|
|
and (min-device-width: 375px)
|
|
|
|
and (max-device-width: 667px)
|
|
|
|
and (-webkit-min-device-pixel-ratio: 2)
|
|
|
|
and (orientation: landscape) {
|
|
|
|
}
|
|
|
|
/* ----------- Google Pixel ----------- */
|
|
|
|
/* Portrait */
|
|
|
|
@media screen
|
|
|
|
and (device-width: 360px)
|
|
|
|
and (device-height: 640px)
|
|
|
|
and (-webkit-device-pixel-ratio: 3)
|
|
|
|
and (orientation: portrait) {
|
|
|
|
}
|
|
|
|
/* Landscape */
|
|
|
|
@media screen
|
|
|
|
and (device-width: 360px)
|
|
|
|
and (device-height: 640px)
|
|
|
|
and (-webkit-device-pixel-ratio: 3)
|
|
|
|
and (orientation: landscape) {
|
|
|
|
}
|
|
```
|
|
|
|
> Com essa abordagem, você terá uma lista enorme de consultas de mídia.
|
|
|
|
### Pontos de interrupção baseados no conteúdo
|
|
|
|
Essa é a opção preferida ao criar ou gravar as regras de ponto de interrupção. Porque é fácil ajustar seu conteúdo de acordo com um layout específico somente quando ele requer uma alteração.
|
|
```
|
|
@media only screen (min-width: 768px){
|
|
...
|
|
}
|
|
```
|
|
|
|
> Este ponto de interrupção significa que o CSS será aplicado quando a largura do dispositivo for 768px ou superior.
|
|
|
|
#### Você também pode definir um intervalo com pontos de interrupção, portanto, o CSS só será aplicado dentro desses limites.
|
|
```
|
|
@media only screen and (min-width: 768px) and (max-width: 959px){
|
|
|
|
...
|
|
|
|
}
|
|
```
|
|
|
|
**Nota** Sempre tente criar pontos de interrupção com base em seu próprio conteúdo, não em dispositivos. Divida-os em uma largura lógica em vez de em uma largura aleatória e mantenha-os em um número gerenciável, portanto, a modificação permanece simples e clara.
|
|
|
|
**Os pontos de interrupção CSS** são úteis quando você deseja atualizar estilos com base no tamanho da tela. Por exemplo, de um dispositivo que mede 1200px de largura e acima, use o `font-size: 20px;` da `font-size: 20px;` , ou então use o `font-size: 16px;` da `font-size: 16px;` .
|
|
|
|
O que nós começamos é de mais de 1200px, largura de tela de um laptop comum. Você também pode ter notado que mencionamos 'maior que', significando que estamos de certa forma usando algo como uma instrução ' **se-então** '.
|
|
|
|
Vamos transformá-lo em código CSS:
|
|
|
|
```css
|
|
.text1 {
|
|
font-size: 16px;
|
|
}
|
|
@media (min-width: 1200px) {
|
|
.text1 {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
```
|
|
|
|
**Para nossa conveniência** , escrevemos primeiro o estilo básico `.text1` ... depois, vamos especificar as regras `@media` .
|
|
|
|
**Dica** : você pode ver em um Framework CSS comum chamado 'Bootstrap', que eles adotaram **'min-width' e up** em seu Bootstrap v4.0, em comparação com seu antigo Bootstrap v3.0 usando **'max-width' e down** . Isso é apenas uma **preferência** , e não há nada de errado em dizer " _esse_ tamanho e menos que" versus " _esse_ tamanho e maior que".
|
|
|
|
Não há problema em usar `@media (max-width) {}` . Aqui está um exemplo:
|
|
|
|
```css
|
|
.text1 {
|
|
font-size: 20px;
|
|
}
|
|
@media (max-width: 1199px) {
|
|
font-size: 16px;
|
|
}
|
|
```
|
|
|
|
```css
|
|
// Normal, basic styles
|
|
// that look great on small screens
|
|
// but not on bigger screens
|
|
body {
|
|
font-size: 16px;
|
|
}
|
|
|
|
// Define a new breakpoint, with a media query.
|
|
// In this case, for when the viewport's width
|
|
// is at least 512px wide.
|
|
@media (min-width: 512px) {
|
|
body {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
```
|
|
|
|
Os pontos de interrupção baseados no conteúdo, e não no dispositivo, são menos complicados. Aqui está um trecho simples que é acionado quando a largura do dispositivo é ascendente do `code 700px` aproximadamente da tela do smartphone
|
|
|
|
```css
|
|
@media only screen and (min-width: 700px) {
|
|
something {
|
|
something: something;
|
|
}
|
|
}
|
|
```
|
|
|
|
Você também pode definir uma largura mínima e máxima, o que permite que você faça experimentos com intervalos diferentes. Este dispara entre smar-phone e tamanhos maiores de desktops e monitores
|
|
|
|
```code
|
|
@media only screen and (min-width: 700px) and (max-width: 1500px) {
|
|
something {
|
|
something: something;
|
|
}
|
|
}
|
|
```
|
|
|
|
#### Mais Informações:
|
|
|
|
* [Pontos de interrupção responsivos](https://getbootstrap.com/docs/4.1/layout/overview/#responsive-breakpoints)
|
|
* [artigo freecodecamp.org sobre como usar pontos de interrupção CSS](https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862)
|
|
* [Consultas de mídia CSS3](https://guide.freecodecamp.org/css/css3-media-queries)
|
|
* [Definindo pontos de interrupção](https://responsivedesign.is/strategy/page-layout/defining-breakpoints/)
|
|
* [CSS-Tricks: @media queries](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/)
|
|
* [w3schools: pontos de interrupção típicos do dispositivo](https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp) |