Jak uzyskać aktualną szerokość ekranu w CSS?

Do formatowania używam następującego kodu CSS, gdy szerokość ekranu jest mniejsza niż 480 pikseli i działa poprawnie.Jak uzyskać aktualną szerokość ekranu w CSS?

@media screen and (min-width: 480px) { 
    body { 
     background-color: lightgreen; 
    } 
}

chciałbym uzyskać bieżącą szerokość na obliczenie używać zoom jak następuje:

@media screen and (min-width: 480px) { 
    body { 
     background-color: lightgreen; 
     zoom: (current screen width)/(480); 
    } 
}

Źródło

2016-02-14 mongmong seesee

To jest po prostu niemożliwe, aby to zrobić w css sam. –

'zoom' jest tylko IE. teraz w CSS używa 'transform: scale (xx)' – dippas

-2

Jak wspomniano na this post jej nie możliwe. Możesz przygotować oddzielne pliki .css dla różnych typów mediów i obsługiwać je za pomocą javascript. Spójrz na ten artykuł: How to use Media Queries in JavaScript

Źródło

2016-02-14 15:38:57

Jeśli spojrzysz poza pierwszą odpowiedź na to pytanie, które połączyłeś, będziesz w stanie powiedzieć, co OP próbuje, jest możliwe. –

Użyj funkcji procentowej widoczności CSS3.

Viewport-Percentage Explanation

Zakładając chcesz rozmiar szerokość ciało się stosunek widok portu przeglądarki. Dodałem obramowanie, aby zobaczyć zmianę rozmiaru ciała podczas zmiany szerokości lub wysokości przeglądarki. Użyłem proporcji 90% rozmiaru portu widoku.

<!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>

Źródło

2016-02-14 17:46:56

Użyj "Pełna strona", aby zobaczyć efekt powiększenia. –

Jak uzyskać aktualną szerokość ekranu w CSS?

Odpowiedz

Powiązane problemy