English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS media queries allow you to format documents to be displayed correctly on output devices of different sizes.
Media queries allow you to customize the display of web pages for specific ranges of devices (such as smartphones, tablets, desktops, etc.) without changing the markup. Media queries consist of media types and zero or more expressions that match conditions with specific media features (such as device width or screen resolution).
Since media queries are logical expressions, they can be parsed as true or false. If the media type specified in the media query matches the type of device displaying the document, and all expressions in the media query are met, then the query result is true. When the media query is true, the relevant stylesheet or style rules are applied to the target device. This is a simple example of standard device media queries.
/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-largura: 320px) and (max-largura: 480px){
/* styles */
}
/* Smartphones (portrait) ---------- */
@media screen and (max-largura: 320px){
/* styles */
}
/* Smartphones (landscape) ---------- */
@media screen and (min-largura: 321px){
/* styles */
}
/* Tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-largura: 768px) e (max-largura: 1024px){
/* styles */
}
/* Tablets, iPads (portrait) ---------- */
@media screen and (min-largura: 768px){
/* styles */
}
/* Tablets, iPads (landscape) ---------- */
@media screen and (min-largura: 1024px){
/* styles */
}
/* Desktops and laptops ---------- */
@media screen and (min-largura: 1224px){
/* styles */
}
/* Large screens ---------- */
@media screen and (min-largura: 1824px){
/* styles */
}Teste e veja‹/›Tip:Media queries are an excellent method for creating responsive layouts. With media queries, you can customize the website for users browsing on smartphones or tablets, etc., without changing the actual content of the page.
You can use CSS media queries to change the width of the web page and related elements, providing the best viewing experience for users on different devices.
The following style rules will automatically change the width of the container element based on the screen or viewport size. For example, if the viewport width is less than768pixels, it will cover the width of the viewport100%, if it is greater than768pixels but less than1024pixels, it will be75pixels, and so on.
.container {
margin: 0 auto;
background: #f2f2f2;
caixa-sizing: borda-caixa;
}
/* Telefones celulares (em retrato e paisagem) ---------- */
@media screen and (max-largura: 767px){
.container {
largura: 100%;
preenchimento: 0 10px;
}
}
/* Tablets e iPads (em retrato e paisagem) ---------- */
@media screen and (min-largura: 768px) e (max-largura: 1023px){
.container {
largura: 750px;
preenchimento: 0 10px;
}
}
/* Computadores de baixa resolução e laptops ---------- */
@media screen and (min-largura: 1024px) {
.container {
largura: 980px;
preenchimento: 0 15px;
}
}
/* Computadores de alta resolução e laptops ---------- */
@media screen and (min-largura: 1280px) {
.container {
largura: 1200px;
preenchimento: 0 20px;
}
}Teste e veja‹/›Atenção:Você pode usar CSS em elementos3 Ajuste do Tamanho da CaixaAtributo, para criar layouts mais intuitivos e flexíveis.
Você também pode usar consultas de mídia CSS para tornar o layout de colunas do seu site mais adaptável e apenas com pouco customização para responder a dispositivos.
Se o tamanho da viewport for maior ou igual a768píxeis, as seguintes regras de estilo serão criadas para dois layouts de coluna, mas se for menor ou igual a768píxeis, ele será apresentado como um layout de coluna.
.coluna {
largura: 48%;
preenchimento: 0 15px;
caixa-sizing: borda-caixa;
fundo: #93dcff;
flutuante: esquerda;
}
.container .coluna:first-filho{
margem-direita: 4%;
}
@media screen and (max-largura: 767px){
.coluna {
largura: 100%;
preenchimento: 5px 20px;
flutuante: nenhum;
}
.container .coluna:first-filho{
margem-direita: 0;
margem-inferior: 20px;
}
}Teste e veja‹/›