Zbuduj układy adaptacyjne bez zapytań multimedialnych

Sep 14, 2025

Jak

Przez długi czas starałem się osiągnąć idealną wizualną kompozycję na stronach internetowych. Miałem mnóstwo bólu z punktami przerwami CSS w mojej codziennej pracy i nigdy nie był dość zadowolony ze wspólnych sposobów obsługi układu responsywnego. Ostatnio odkryłem bardzo fajnie Responsive Web Design. Sztuczka, która sprawia, że wszystko jest proste, konsekwentne i logiczne, a pragnę podzielić się z tobą.

Ten artykuł dotyczy głównie kreatywnych rozwoju, więc jest dla obu: frontowych deweloperów, którzy mogą znaleźć tę technikę przydatnych, a projektanci stron internetowych, którzy powinni mieć ogólne zrozumienie produkcji internetowej i jak poprawić ostateczne wyjście. Zakładam, że już wiesz o CSS, punkty przerwania i zapytaniach medialnych.

Zbuduj blog z siatką i flexbox

Tradycyjny sposób

Adaptive layouts: breakpoints — Punkty przerwania mogą prowadzić do niezadowalających wyników dla nieistotnych rzutni

Przenośne urządzenia przejęły świat. Różnorodność wszystkich rodzajów urządzeń zmieniają sposób tworzenia stron internetowych. Przez "Wrażliwą witrynę" większość ludzi zakłada tylko wersje pulpitu i mobilne (czasami desktop, tablet, mobilny). W ten sposób działa tradycyjnie:

 H1 {
Rozmiar czcionki: 80px;
}
.pojemnik {
Szerokość: 980px;
Margines: 0 Auto;
}

@media (max-szerokość: 1023px) {
h1 {
Rozmiar czcionki: 48px;
}
.pojemnik {
Szerokość: Auto;
Wyściółka: 0 30px;
}
}

W rzeczywistości zwykle Układ strony internetowej. Widzimy, nie jest stworzony dla naszego urządzenia. Na przykład, zobaczmy, jak dostosowujemy rozmiar czcionki i H1 & GT; tytuł:

Adaptive layouts — Z jednym punktem przerwania możesz skończyć z dziwnymi rozmiarami punktów

Widzisz, nasze & lt; h1 & gt; Tytuł ma "Rozmiar czcionki: 48px" na urządzeniu szerokości 320px i 800px, a "rozmiar czcionki: 80px" na 1024px i 2560px.

Oczywiście możemy dodać więcej punktów przerwania, ale liczba różnych urządzeń jest niezliczona ilość! To sprawi, że specyfikacje projektu bardzo skomplikowane i mylące, ponieważ trudno jest wiedzieć, która wartość jest stosowana do którego ekranu.

Adaptive layouts: font size — Nigdy nie możesz utworzyć wystarczającej ilości punktów przerwania, aby uzyskać idealny rozmiar czcionki na każdym ekranie

To, czego naprawdę potrzebujemy, to:

Jednostki rzutni.

Adaptive layouts: viewpoint units — Jednostki rzutni poprawiają sprawy, ale nadal potrzebują pracy

Rozwiązanie tego problemu obejmuje rzutni jednostki VW i VH. Są to jednostki długości reprezentujące 1/100 szerokości / wysokości rzutni (powszechnie obsługiwane przez przeglądarki z IE9 +).

Możemy korzystać z nich do regulacji właściwości strony internetowej zgodnie z jego wielkością. Sytuacja będzie trochę lepsza, ale ból jest nadal taki sam:

 H1 {
Rozmiar czcionki: Calc ((80/1920) * 100VW;
}
.pojemnik {
Szerokość: 80VW;
Margines: 0 Auto;
}

@media (max-szerokość: 1023px) {
h1 {
Rozmiar czcionki: Calc ((48/375) * 100VW;
}
.pojemnik {
Szerokość: 90VW;
}
}

Nigdy nie wiemy, czy jest zbyt duży lub za mały.

Jak możemy zbudować system układu adaptacyjnego? Jak zaprojektować responsywną stronę internetową, która działa natywnie od 320px do 2560px?

Idealnie, twój makieta powinien wyjaśnić logikę za układem i jak dostosowuje się z mniejszej rozdzielczości do większych:

Rozwiązanie

Adaptive layouts: solution — Oto jak dokonać prawdziwie adaptacyjnego układu układu

Chcemy stale dostosowywać właściwości z małego ekranu do dużego. Brak punktów przerwania i żadnych zapytań medialnych. To, czego chcemy jedną wartością, która działa dla każdego wyświetlacza.

Kluczem jest funkcja matematyki z dwoma zmiennymi. Na przykład, jeśli chcemy dostosować rozmiar czcionki tytuł, funkcja powinna wyglądać tak:

1920x + y = 80
375x + y = 48

1920 - Domyślna szerokość pulpitu w makiecie designu (równa się 100VW)
375 - Domyślna szerokość mobilna w makiecie projektowania (równa się 100VW)
80 - Żądany rozmiar czcionki H1 na pulpicie
48 - Żądany rozmiar czcionki H1 na telefon komórkowy

Są to wartości X i Y:

x = (80 - 48) / (1920 - 375)
x = 0,0207.

y = 80 - 1920 * 0,0207
y = 40.256.

Aby użyć tych wartości potrzebujemy funkcji Calc CSS do wykonywania obliczeń na stronie internetowej (szeroko wspieranej przez przeglądarki z IE9 +). Powinniśmy liczyć x * 100 razy (ponieważ jednostka 1VW = 1/100 widzenia szerokości).

Bierzemy naszą oryginalną funkcję:
1920x + y = 80
375x + y = 48

Wymień 1920 z 100vw:
100vw * x + y = żądana wartość

Wymień x i y za wartościami:
100VW * 0,0207 + 40.256 = Żądana wartość

Dostajemy ostatni styl CSS:

 H1 {Rozmiar czcionki: Calc (2.07vw + 40.25px)}

Norazowo, że w końcu działa, jak chcieliśmy!

Tylko jedna właściwość dla wszystkich wyświetlaczy. Nie trzeba ponownie zastąpić wartości. Możesz dostosować i obliczyć wszelkiego rodzaju właściwości: szerokość, rozmiar czcionki, wyściółki, margines itp.

Spróbujmy zbudować rzeczywisty układ za pomocą tej techniki:

Ale to podejście ma jedną wadę: trudno zrozumieć, jaką wartość stoi za tym funkcją Calc. Jak możemy to uprościć?

Jeśli kodujesz HTML Codziennie, prawdopodobnie znasz pre-procesorów SASS / SCSS. Oto trochę pomocy dla Ciebie: Zróbmy "Mixin" i sprawić, że wszystkie te obliczenia zdarzają się automatycznie i nadal zachowaj nasze oryginalne wartości.

Jest to ta sama funkcja, jak opisano powyżej, ale wykonana jako MIXIN SASS:

 $ Display-Univers: 1920
$ Display-Wąski: 375

@mixin Fluid ($ nieruchomości, $ minvalue, $ maxvalue)
  $ x: ($ maxvalue - $ minvalue) / ($ Display-Viver - $ Display-Wąski)
  $ y: $ Maxvalue - $ Display-Viver * $ x
  # {$ nieruchomość}: calc (# {100 * $ x} vw + # {$ y} px)

H1.
  @inClude płyn ("rozmiar czcionki", 48,80)

.pojemnik
  @inClude płyn ("szerokość", 315,1580)
@inClude płyn ("wyściółka", 30,60)

Adaptive layouts: mixin — Miksin Sass może ułatwić cały proces

Ta technika Zapewnia bardzo wyrafinowane rozwiązanie, aby wreszcie budować prawdziwie reagujące układy internetowe. Obsługuje większość przeglądarek, zabezpiecza swój projekt, który ma być prawidłowo pokazany odwiedzającym, upraszcza strukturę stylów, a co najważniejsze sprawia, że twój układ spójny i logiczny. Mam nadzieję, że pomoże Ci uruchomić pewne zdumiewające projekty internetowe.

Powiązane artykuły:

17 Naprawdę przydatne responsywne samychwy projektowania stron internetowych
Zasady responsywnej typografii internetowej
Utwórz reagujący układ z siatką CSS

Zbuduj układy adaptacyjne bez zapytań multimedialnych

Tradycyjny sposób

Jednostki rzutni.

Rozwiązanie

Jak - Najpopularniejsze artykuły

Jak wybrać nazwę strony dla Twojej firmy

6 Szybkie wskazówki dotyczące poprawy rysowania pędzla

Jak utworzyć skanowanie 3D z wychwytywaniem rzeczywistości

Jak przyspieszyć retopologię w Majowie

Dodaj efekt usterki na swoją stronę

Jak tworzyć aktywa cyfrowe

Jak doskonalić włosy w portretach

Zrób prototyp Hi-Fidelity w atomowym

Kategorie