6.8 KiB
| title | localeTitle |
|---|---|
| Breakpoints | 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 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:
.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:
.text1 {
font-size: 20px;
}
@media (max-width: 1199px) {
font-size: 16px;
}
// 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
@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
@media only screen and (min-width: 700px) and (max-width: 1500px) {
something {
something: something;
}
}