Rakenna mukautuvia asetteluja ilman mediakyselyjä

Sep 12, 2025

Miten tehdään

Pitkästä aikaa yritin saavuttaa täydellisen visuaalisen koostumuksen verkkosivuilla. Minulla on paljon kipua CSS-katkaisupisteissä päivittäisessä työssäni ja ei ollut koskaan täysin tyytyväinen yhteisiin tapoihin käsitellä reagoivaa asettelua. Viime aikoina löysin erittäin viileän Vastaava web-suunnittelu Temppu, joka tekee kaiken yksinkertaisen, johdonmukaisen ja loogisen, ja olen innokas jakamaan sen kanssasi.

Tämä artikkeli on pääasiassa luovaa kehitystä, joten se on molemmille: Frond End -kehittäjille, jotka saattavat löytää tämän tekniikan hyödyllisiä ja web-suunnittelijoita, joilla on yleinen ymmärrys verkkotuotannosta ja kuinka parantaa lopullista tuotosta. Oletan, että tiedät jo CSS: stä, katkaisupisteistä ja mediakyselyistä.

Rakenna blogi grid ja flexbox

Perinteinen tapa

Adaptive layouts: breakpoints — Katkaisupisteet voivat johtaa epätyydyttävään tulokseen ei-standardi näkökulmasta

Kannettavat laitteet vievät maailman. Erilaisia kaikenlaisia laitteita vaihtavat tapaa, jolla luomme verkkosivustoja. "Vastaava verkkosivusto" Useimmat ihmiset olettavat vain työpöydälle ja mobiiliversioille (joskus työpöydälle, tablet, mobiili). Näin se toimii perinteisesti:

 H1 {
Font-koko: 80px;
}
.container {
Leveys: 980px;
Marginaali: 0 auto;
}

@Media (max-leveys: 1023px) {
h1 {
Font-koko: 48PX;
}
.container {
Leveys: Auto;
Pehmuste: 0 30px;
}
}

Itse asiassa yleensä Verkkosivuston asettelu Näemme laitteemme ei ole tehty. Katsotaan esimerkiksi, miten säätämme Fontin koko & lt; h1 & gt; Otsikko:

Adaptive layouts — Vain yhden katkaisupisteen avulla voit päätyä outojen näköisten koot

Näet, meidän & lt; h1 & gt; Otsikko on "Font-koko: 48px" 320px- ja 800px leveyslaitteessa ja "Font-koko: 80px" 1024px ja 2560px.

Tietenkin voimme lisätä enemmän katkopisteitä, mutta eri laitteiden lukumäärä on lukemattomia! Tämä tekee suunnittelutieteistä erittäin monimutkaista ja hämmentävää, koska on vaikea tietää, mihin arvoon sovelletaan mihin näyttöön.

Adaptive layouts: font size — Et voi koskaan luoda tarpeeksi katkaisupisteitä saadaksesi fonttikoko täydellisen jokaiseen näyttöön

Mitä tarvitsemme, on tämä:

Viewport-yksiköt

Adaptive layouts: viewpoint units — Viewport-yksiköt parantavat asioita, mutta he tarvitsevat vielä työtä

Tämän ongelman ratkaisu sisältää VW ja VH. Nämä ovat pituusyksiköitä, jotka edustavat 1/100: ta näkemyksen leveydestä / korkeudesta (yleisesti IE9 +: n selaimilla).

Voimme käyttää näitä säätämään verkkosivun ominaisuuksia sen koon mukaan. Tilanne on hieman parempi, mutta kipu on edelleen sama:

 H1 {
Fontti-koko: Calc ((80/1920) * 100vW;
}
.container {
Leveys: 80vw;
Marginaali: 0 auto;
}

@Media (max-leveys: 1023px) {
h1 {
Fontti-koko: Calc ((48/375) * 100vW;
}
.container {
Leveys: 90vw;
}
}

Emme koskaan tiedä, onko se liian suuri tai liian pieni.

Miten voimme rakentaa todellisen mukautuvan asettelujärjestelmän? Miten suunnittelemme reagoivaa verkkosivustoa, joka toimii silti 320px: stä 2560px: ksi?

Ihannetapauksessa mockup sinun on selitettävä logiikka asettelun takana ja miten se mukautuu pienemmästä resoluutiosta suuremmaksi:

Ratkaisu

Adaptive layouts: solution — Näin tehdä todella mukautuva asettelujärjestelmä

Haluamme jatkuvasti säätää kiinteistöjä pienestä näytöstä isoksi. Ei katkaisupisteitä eikä mediakyselyjä. Haluamme on yksi yksittäinen arvo, joka toimii jokaiselle näytölle.

Matematiikka, jossa on kaksi muuttujaa, on avain. Jos esimerkiksi haluamme säätää otsikon kirjasinkokoa, toiminnon pitäisi näyttää tältä:

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

1920 - Default Desktop Leveys Design Mockup (vastaa 100VW)
375 - Oletus mobiili leveys design mockup (vastaa 100VW)
80 - Haluttu H1 Otsikko Fontin koko työpöydällä
48 - Haluttu H1 Otsikko Fontin koko Mobile

Nämä ovat X- ja Y-arvot:

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

Y = 80 - 1920 * 0.0207
Y = 40,256

Näiden arvojen käyttäminen Tarvitsemme CALC CSS -toiminnon suorittamaan laskelmia verkkosivulla (yleisesti tuetaan IE9 +: n selaimista). Meidän pitäisi laskea x * 100 kertaa (koska 1VW yksikkö = 1/100-katseluohjelma).

Otamme alkuperäisen tehtävämme:
1920x + y = 80
375x + y = 48

Vaihda 1920 100VW: llä:
100VW * x + y = haluttu arvo

Vaihda x ja y arvot:
100VW * 0.0207 + 40.256 = Haluttu arvo

Saat lopullisen CSS-tyylin:

 H1 {font-koko: calc (2.07vW + 40,25px)}

Yllättäen tarpeeksi, että lopulta toimii vain, miten halusimme!

Vain yksi ominaisuus kaikille näytöille. Ei tarvitse korvata arvoja uudestaan ja uudestaan. Voit säätää ja laskea kaikenlaisia ominaisuuksia: leveys, fontti koko, pehmuste, marginaali jne.

Yritetään rakentaa todellinen asettelu tällä tekniikalla:

Mutta tällä lähestymistavalla on yksi haitta: on vaikea ymmärtää, mitä arvoa on tämän laskennan takana. Kuinka voimme yksinkertaistaa sitä?

Jos koodataan HTML: n päivittäin, olet todennäköisesti perehtynyt SASS / SCSS-esikäsittelylaitteisiin. Tässä on vähän apua sinulle: Tee "Mixin" ja tehdä kaikki nämä laskelmat tapahtuvat automaattisesti ja säilyttävät edelleen alkuperäiset arvot.

Se on sama tehtävä kuin edellä kuvatulla tavalla, mutta se on valmistettu Sass Mixin:

 $ Display-Wide: 1920
$ Näytön kapea: 375

@mixin Fluid ($ omaisuus, $ minvalue, $ maxvalue)
  $ X: ($ MAXVALUE - $ Minvalue) / ($ Display-Wide - $ Display-Narrow)
  $ y: $ Maxvalue - $ Display-Wide * $ x
  # {$ Property}: Calc (# {100 * $ x} VW + # {$ y} px)

h1
  @include Fluid ('Font-koko', 48,80)

.container
  @include neste ("leveys", 315,1580)
@include neste ("pehmuste", 30,60)

Adaptive layouts: mixin — Sass Mixin voi helpottaa koko prosessin

Tämä tekniikka Tarjoaa erittäin hienostuneen ratkaisun lopulta rakentaa todella reagoivia web-asetteluja. Se tukee useimpia selaimia, varmistaa projektisi oikein näkyvästi kävijälle, yksinkertaistaa tyylejä rakennetta, ja mikä tärkeintä tekee web-asetteluasi johdonmukaiseksi ja loogisiksi. Toivon, että se voi auttaa sinua käynnistämään hämmästyttäviä verkkoprojekteja.

Aiheeseen liittyvät artikkelit:

17 Todella hyödyllinen reagoiva Web Design Tutorials
Vastaavan Web-typografian säännöt
Luo reagoiva asettelu CSS-verkkoon

Rakenna mukautuvia asetteluja ilman mediakyselyjä

Perinteinen tapa

Viewport-yksiköt

Ratkaisu

Miten tehdään - Suosituimmat artikkelit

Henkilön tekeminen

Kuinka luoda kuohuviini silmät öljymaalissa

Kuinka yhdistää 3D ja sarjakuva Zbrushissa

Piirrä huono-Ass Geisha

15 Fantasy muotokuva vinkkejä

Kuinka valmistajan grafiikan valmistella vaikutukset

Kuinka rakentaa elokuvateatterin

Luo laadukkaita digitaalisia kopioita taiteestasi

Luokat