MIN-PIDTH i MAX WIDTH w zapytaniach medialnych | Wyjaśnione

Responsywna strona internetowa jest określana jako dynamiczna strona internetowa, która zmienia jej strukturę zgodnie z urządzeniem, na którym jest wyświetlana. Może zmienić swoje zachowanie w zależności od szerokości ekranu, rozdzielczości ekranu, orientacji itp. Urządzenia. Teraz, aby stworzyć taką stronę internetową, programiści korzystają z zapytań medialnych. Tutaj w tym artykule omawiane tematy są następujące.

1. Zapytanie medialne
2. Punkty przerwania CSS
3. Min szerokość
4. Maksymalna szerokość
5. Łączenie obu
6. Kiedy używać, którego: szerokość min lub maksymalna szerokość

Zapytanie medialne

Zapytania medialne zostały wprowadzone w CSS w wersji 3, co pozwala użytkownikom tworzyć responsywne strony internetowe za pomocą reguły @Media. Ta reguła wymaga podania typu mediów, takiego jak druk, ekran, mowa lub wraz z niektórymi logicznymi wyrażeniami, które określają niektóre funkcje mediów, takie jak szerokość, rozdzielczość, gęstość itp.

Te zapytania w zasadzie umożliwiają zmianę układu internetowego w zależności od typu urządzenia, takiego jak komputer stacjonarny, laptop, mobilne itp. Tutaj pokazaliśmy, jak zdefiniować zapytanie medialne.

Składnia

@Media ekran i (min min: 420px) i (maksymalna szerokość: 650px)
@reguła
typ mediów
Funkcja mediów
Funkcja mediów
operator
operator

Zapytanie multimedialne zawsze zaczyna się od reguły @Media i wymaga określania typu multimedialnego, na którym należy zastosować zapytanie. Następnie musisz podać typ nośnika ekranu i użyć operatorów takich jak „i„ Aby połączyć funkcje multimediów, takie jak min-szerokość lub maksymalna szerokość.

Zapytania o media są określone w określonych punktach, które są określane jako punkty przerwania zapytania multimedialnego. Zobacz nadchodzącą sekcję, aby się ich szczegółowo nauczyć.

Punkty przerwania CSS

Punkty przerwania w CSS są określane jako punkty, w których zmienia się struktura witryny odpowiadającej rozmiarowi ekranu typu urządzenia. Punkty przerwania są decydowane na podstawie typu urządzenia lub typu treści. Niektóre typowe punkty przerwania są następujące.

1. W przypadku urządzeń mobilnych: 320px do 480px
2. W przypadku tabletów i iPadów: 481px do 768px
3. W przypadku laptopów: 769px do 1024px
4. Dla komputerów stacjonarnych: 1025px do 1200px

Podczas czytania powyższych wyjaśnień musiałeś zauważyć, że użyliśmy dwóch funkcji mediów minimalnej i maksymalnej szerokości. Musisz się zastanawiać, co to są i kiedy ich użyć. Poniżej podaliśmy wszystkie istotne szczegóły.

Min szerokość

Funkcja mediów minimalnej określa minimalną szerokość określonego urządzenia. Na przykład w powyższej sekcji zwróciliśmy niektóre szerokości ekranu na podstawie typu urządzenia, takie jak minimalna szerokość ekranu urządzeń mobilnych to 320px.

Przykład

@Media ekran i (min min: 600px)
P
Rozmiar czcionki: 16px;

W powyższym kodzie stwierdziliśmy, że gdy minimalna szerokość ekranu wynosi 600px lub szersza, wielkość czcionki akapitu zmieni się na 16px. Tak więc każde urządzenie o tej szerokości ekranu wyświetli tekst akapitu w określonym rozmiarze czcionki.

Maksymalna szerokość

Funkcja nośnika maksymalnego szerokości stwierdza maksymalna szerokość konkretnego urządzenia. Na przykład maksymalna szerokość ekranu urządzeń mobilnych wynosi 480px. Zapoznaj się z poniższym przykładem, aby go lepiej zrozumieć.

Przykład

@Media ekran i (maksymalna szerokość: 700px)
P
Rozmiar czcionki: 25px;

Kod powyżej stwierdza, że ​​gdy maksymalna szerokość ekranu wynosi 700px lub mniejsza, rozmiar czcionki akapitu zmieni się na 25px. Każde urządzenie renderujące tę szerokość ekranu wyświetli tekst akapitu w określonym rozmiarze czcionki.

Łączenie obu

Możesz także korzystać z obu funkcji multimediów razem, łącząc je z „operatorem„.

Przykład

P
Style czcionki: Bold;

@Media ekran i (min min: 600px) i (maksymalna szerokość: 700px)
P
Styl czcionki: Kursywa;

Powyższy kod określa, że ​​jeśli szerokość ekranu leży między 600px a 700px, styl czcionki będzie kursywą, w przeciwnym razie styl czcionki będzie odważny.

Kiedy używać, którego: szerokość min lub maksymalna szerokość

Jeśli najpierw projektujesz swoją witrynę dla mniejszych urządzeń, ustaw domyślne punkty przerwania CSS z szerokością min i odpowiednio dostosuj dla większych urządzeń.

Tymczasem, jeśli najpierw projektujesz dla większych urządzeń, użyj maksymalnej szerokości, a następnie odpowiednio dostrajaj dla mniejszych urządzeń.

Wniosek

Min szerokość i maksymalna szerokość są funkcjami multimedialnymi, które odpowiadają określonemu typowi mediów, który został określony w zapytaniu Media. Widok minimalnej szerokości ekranu określonego urządzenia, tymczasem funkcja nośnika maksymalnego szerokości stwierdza maksymalna szerokość ekranu określonego urządzenia. Jeśli najpierw projektujesz witrynę dla mniejszych urządzeń, ustaw początkowe punkty przerwania z szerokością min, podczas gdy jeśli najpierw projektujesz dla większych urządzeń, użyj maksymalnej szerokości. W tym poście szczegółowo omówiono szerokość min, a funkcje mediów maksymalnej szerokości wraz z odpowiednimi przykładami.