Jak zrobić CSS na podstawie różnych rozmiarów ekranu telefonu?

Question

Staram się dostosować stronę do różnych rozmiarów telefonów. Wiem, że mogę używać zapytań o media, ale co, jeśli szerokość telefonu jest taka sama, ale wysokość jest inna. Na przykład zarówno Iphone X, jak i 6,7,8 mają tę samą szerokość, ale różną długość

html css

-1

simple 20 listopad 2019, 01:21

1

Następnie zapytałeś o wysokość, a nie szerokość.

–

Carl Edwards

20 listopad 2019, 01:22

Z maksymalną długością?

–

simple

20 listopad 2019, 01:24

To pytanie wydaje się bardzo szerokie. To bardziej jak decyzja projektowa, czy ustawić wysokość, min / max czy auto.

–

Victoria Le

20 listopad 2019, 01:25

Nie. W tym przypadku byłoby to max-height.

–

Carl Edwards

20 listopad 2019, 01:28

Dziękuję bardzo!

–

simple

20 listopad 2019, 01:28

Answer 1

Użyj zapytań o media, aby kierować reklamy na widoczny obszar użytkowników i renderować niektóre pliki CSS.

https://www.google.com/url?sa=t&source=web&rct=j&url=https://www.w3schools.com/css/css3_mediaqueries.asp&ved=2ahUKEwiHmfrLqPflAhXQQEEAHZUZBxUQFjAYegFFQIAxAB&usg=AGO2

0

Stanley 20 listopad 2019, 01:25

Answer 2

Prawie to, co Carl powiedział w swoim komentarzu.

Oto prawidłowy przykład:

@media only screen and (max-height: 600px) {
  body {
    background-color: lightblue;
  }
}

1

robbieAreBest 20 listopad 2019, 01:41

Answer 3

Aby to zrobić, użyj zapytań o media (jak już wspomniano).
Możesz zmieniać stylistykę nie tylko według ekranu max-width i max-height, ale także na orientation: portrait, a nawet aspect-ratio:.

Poza tym myślę, że można by stworzyć reguły css wokół koncepcji jednostek względnych.< br/> Możesz sprawić, by cała treść była skalowalna
- nie tylko
div { width: 20vw; }

Ale też
p { font-size: 5vmin; }
W ten sposób nie będziesz musiał się martwić dziwnymi proporcjami lub różnymi rozdzielczościami.

1

Gaben 20 listopad 2019, 02:17

Jak zrobić CSS na podstawie różnych rozmiarów ekranu telefonu?

3 odpowiedzi

Podobne pytania

Nowe pytania

html