Artigo Diretório
Como o CSS responsivo móvel exibe diferentes layouts responsivos da tela @media de acordo com diferentes resoluções?
O artigo a seguir apresentará como usar CSS para determinar diferentes resoluções e exibir diferentes layouts de largura para obter largura adaptável.
Amigos necessitados podem consultá-lo, espero que seja útil para todos.
A diferença entre as páginas da web de impressão de tela @media e @media
- Se o css precisar ser usado em um dispositivo de impressão, use @media, caso contrário, use @media screen.
- No entanto, isso não é necessariamente verdade.Na verdade, se você substituir "screen" por "print" e escrevê-lo como @media print, o CSS poderá ser usado no dispositivo de impressão;
- Mas observe que o css declarado por @media print só é válido em dispositivos de impressão.
1. Descrição do estojo pequeno DIVCSS
Primeiro definimos um CSS de caixa DIV chamado ".abc", definimos sua altura para 300px e definimos a borda CSS para preto;
- e configurações
margin:0 autoO layout é centralizado e esses dois estilos são predefinidos para facilitar a visualização.
Arrastamos manualmente o navegador para exibir a largura e observamos como a largura da caixa muda:
- Quando a largura do navegador é ajustada para uma largura não superior a 500px, são exibidos 100px correspondentes à largura da caixa;
- Quando a largura do navegador é ajustada para menos de 901px, ".abc" é exibido correspondente à largura da caixa, que exibe 200px;
- Quando a largura do navegador é ajustada para ser maior que 1201px, a largura do objeto de caixa exibe 1200px;
- Quando for menor que 1200px, a largura da tela será de 900px.
2, código adaptável do terminal móvel do telefone móvel CSS
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 901px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */- Deve-se notar que a ordem do código CSS está compondo CSS de grande para pequeno (julgando que quanto maior a largura do navegador, maior a frente).
- Isso ocorre devido ao relacionamento lógico, o julgamento de @media da depuração CSS fará com que o julgamento falhe.
3. Código HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
</style>
</head>
<body>
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
</body>
</html>Nota: proporção do dispositivo
- device-aspect-ratio pode ser usado para ajustar dispositivos com proporções de tela específicas, o que também é uma propriedade útil.
- Por exemplo, nossa página deseja definir um estilo para telas normais com uma proporção de 4:3.
- Em seguida, para widescreen 16:9 e 16:10, defina outro estilo, como largura adaptável e largura fixa:
- @media only screen e (device-aspect-ratio:4/3)
4. Compatível com os principais navegadores HTML+CSS+JS código fonte
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="abc">DIV宽度会随浏览器宽度变化哦，改变浏览器宽度</div>
</body>
</html>O acima é o CSS adaptável do terminal móvel, que exibe diferentes conteúdos detalhados responsivos à tela @media de acordo com as diferentes telas.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) Compartilhado "Mobile Adaptive CSS Diferentes telas exibem diferentes @media Screen Responsiveness", o que é útil para você.
Bem-vindo a compartilhar o link deste artigo:https://www.chenweiliang.com/cwl-2074.html
Bem-vindo ao canal Telegram do blog de Chen Weiliang para receber as últimas atualizações!
📚 Este guia contém um valor enorme, 🌟Esta é uma oportunidade rara, não perca! ⏰⌛💨
Compartilhe e curta se gostar!
Seus compartilhamentos e curtidas são nossa motivação contínua!