Como obter a largura actual do ecrã em CSS?
Uso o seguinte código CSS para formatar quando a largura do ecrã é inferior a 480px, e funciona bem.
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Eu gostaria de obter a largura actual para o cálculo para usar zoom
como se segue:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
zoom: (current screen width)/(480);
}
}
6
2 answers
Usa a funcionalidade CSS3 Verport-percentagem.
Assumindo que quer que o tamanho da largura do corpo seja uma proporção da porta de visualização do navegador. Adicionei um contorno para que possa ver o tamanho do corpo à medida que muda a largura ou altura do navegador. Usei uma proporção de 90% do tamanho da porta de visão.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styles</title>
<style>
@media screen and (min-width: 480px) {
body {
background-color: skyblue;
width: 90vw;
height: 90vh;
border: groove black;
}
div#main {
font-size: 3vw;
}
}
</style>
</head>
<body>
<div id="main">
Viewport-Percentage Test
</div>
</body>
</html>
18
Author: Heather92065, 2018-03-16 13:58:50
Tal como mencionado em este post não é possível. Podes preparar o seperate .arquivos css para diferentes tipos de mídia e lidar com ele com javascript. Olha para esta arte.: Como usar as consultas multimédia no JavaScript
-2
Author: Mehmet Cetin, 2017-05-23 10:29:21