Como obter a largura actual do ecrã em CSS?

Question

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

html css css3

Author: mcserep, 2016-02-14

Source

2 answers

score 18 · Answer 1

Usa a funcionalidade CSS3 Verport-percentagem.

Verport-Explicação Percentual

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>

score -2 · Answer 2

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