Käytä näitä vinkkejä luodaksesi reagoivia asetteluja tehokkaasti.
Kuvittele, että olet tehnyt kaiken kovan työn luodaksesi todella upean asettelun. Mutta sitten, kun pienennät selainikkunaa hieman, löydät jotain, joka on täynnä. Lähetät mediakyselyn ongelman korjaamiseksi. Mutta kun muutat ikkunan kokoa, huomaat, että jotain muuta on rikki.
Tämä on asia, jonka useimmat CSS-kehittäjät kokevat jossain vaiheessa. Mutta onneksi meillä on useita nykyaikaisia CSS-ratkaisuja, jotka tekevät asioiden kehittämisestä ja toimivuudesta niin paljon helpompaa. Tässä artikkelissa tarkastellaan viittä hyödyllistä käytäntöä, jotka kannattaa pitää mielessä verkkosivustoja kehitettäessä. Nämä vinkit auttavat sinua välttämään ärsyttäviä katkoksia suunnittelussasi.
1. Aloita yleisellä tyylisivulla
Aloita aina globaalilla tyylillä kirjoittaessasi CSS: ää. Älä huolehdi asettelusta. Aseta sen sijaan yleiset tyylit, kuten typografia, värit ja taustat. Nollaa marginaalit, poista alleviivaukset linkeistä ja niin edelleen.
Kun olet tehnyt yleisen tyylin, voit aloittaa asettelun luomisen ja kohdistaa asettelun yksittäisiin elementteihin. Periaatteessa aloita ylhäältä ja siirry sitten elementteihin.
Seuraava CSS-esimerkki palauttaa kaikkien elementtien marginaalin 0:ksi, määrittää kaikkien tärkeimpien otsikoiden typografian ja värin sekä lisää yhdenmukaisen marginaalin kaikkiin:
kehon,
h1,
h2,
h3,
s {
marginaali: 0;
}h1,
h2,
h3 {
väri: sininen;
font-perhe: "Verdana" sans-serif;
fontin paino: 900;
viivankorkeus: 1;
}
h2,
h3,
s {
marginaali-ala: 1rem;
}
Nyt kun olet määrittänyt kaikki perustyylit, voit rakentaa sieltä. Voit esimerkiksi lisätä täyttöä säilöelementtiin. Tämä työntää sisällön pois selaimesi reunoista. Sitten voit hakea a max-leveys kuviin, jotta ne voivat mukautua säilön leveyteen. Tarkoitus on aloittaa yleisistä elementeistä ennen kuin kohdistat tiettyihin elementteihin.
Jälleen kerran, asettelu on responsiivinen. Joten kun muutat näytön kokoa, elementtien koko muuttuu vastaavasti. Kehittäjänä sinun tulee olla tietoinen näistä CSS-vinkeistä koska ne voivat viedä tuottavuutesi uudelle tasolle.
2. Vältä kiinteitä kokoja
Kun alat miettiä asetteluja, ensimmäinen asia, joka sinun tulee pitää mielessä, on välttää kiinteitä kokoja. Kiinteät koot viittaavat ominaisuuksiin, kuten leveys: 1000px, korkeus: 200px, ja niin edelleen. Kiinteän korkeuden tai leveyden asettaminen aiheuttaa sinulle ongelmia vain pitkällä matkalla.
Käytä sen sijaan säädettäviä korkeuksia ja leveyksiä. Yksi tapa on käyttää min-korkeus ja min-leveys sijasta korkeus ja leveys. Oletetaan esimerkiksi, että asetat elementin leveydeksi 600 pikseliä. Kun pienennät 600 pikseliä, sisältö vuotaa yli:
Sen sijaan sinun tulee vaihtaa omaisuutta leveys to max-leveys. Kanssa max-leveys, elementin annetaan kutistua, kun selainikkunaa kavennetaan. Ja jos ikkunasta tulee leveä, teksti laajenee takaisin alkuperäiseen pituuteensa. Tässä tulos:
Tämä on sama asia korkeus. Oletetaan esimerkiksi, että asetat korkeus otsikon kiinteään arvoon 200 pikseliä.
otsikko {
korkeus: 200px;
näyttö: ruudukko;
paikkaesineet: keskusta;
}
Tämä keskittää kaiken otsikon täydellisesti. Mutta kun kavennat selainikkunaa, sisältö valuu lopulta ulos säiliöstään. Ja tämä johtuu siitä, että asetat ylätunnisteeseen kiinteän korkeuden.
Yleisesti, korkeus ja leveys ovat molemmat vaarallisia ominaisuuksia. Ratkaisu on käyttää säädettävää korkeutta ja leveyttä, esim. min- ja max -korkeus, ja min- ja max-leveys. Näissä tapauksissa, jos selain joutuu tilanteisiin, joissa sisältö pidentyy, otsikko kasvaa sopeutumaan siihen.
Tämä on yksi niistä yleisimmät CSS-virheet, joita sinun tulee välttää.
3. Muista, että verkkosivustosi on oletuksena reagoiva
Muista, että verkkosivustosi on responsiivinen jo ennen kuin kirjoitat yhden rivin CSS-koodia. Tämä ajattelutapa voi auttaa sinua välttämään suunnitteluprosessin liiallista monimutkaista. Asettelu toimii massiivisissa näytöissä ja pienissä näytöissä. Se ei ehkä ole kaunista. Sitä voi olla jopa vaikea lukea suurilta näytöiltä. Mutta verkkosivusto mukautuu katseluporttiin sen koosta riippumatta.
Tietenkin kuvat voivat vuotaa liikaa ja teksti voi olla liian pientä. Oletusasettelulla et kuitenkaan menetä mitään. Tekstisi ei katkea, ja kaikki elementit näkyvät näytöllä.
Tämän tosiasian ymmärtäminen ja hyväksyminen voi todella auttaa, kun kirjoitat CSS-koodia. Kun kohtaat ongelmia, voit olla varma, että virhe johtuu kirjoittamastasi CSS: stä. Tämä helpottaa ongelman löytämistä ja korjaamista.
Yritä käyttää mediakyselyitä vain lisätäksesi monimutkaisuutta. Esimerkiksi kun haluat, että asettelussasi on kolme saraketta suuremmilla näytöillä. Älä muuten käytä niitä. Jos haluat sukeltaa syvälle mediakyselyihin, lue meidän mediakyselyopas.
Tässä yksi skenaario. Kuvittele, että elementti, jonka luokan nimi on .jakaa siinä on kolme elementtiä. Seuraavalla CSS: llä luodaan kolmen sarakkeen asettelu:
.jakaa {
näyttö: flex;
flex-suunta: rivi;
aukko: 2rem;
}
Pienemmillä näytöillä (40 em leveä tai pienempi), haluat kaiken olevan yhden sarakkeen sisällä. Joten tekisit näin:
@media(maksimileveys: 40 em) {
.jakaa {
näyttö: lohko;
}
}
Tässä ohitat oletuskohdistuksen (kolme saraketta). Mutta mediakysely on tarpeeton, koska selain käyttää näyttö: lohko oletuksena. Sinun ei siis tarvitse määritellä sitä erikseen.
Tätä silmällä pitäen voit muuttaa koodisi käyttämään yhtä mediakyselyä, joka koskee vain suuria näyttöjä. Siellä vaihdat kolmeen sarakkeeseen, kun näyttö on leveämpi kuin 40 em:
@media(maksimileveys: 40 em) {
.jakaa {
näyttö: flex;
flex-suunta: rivi;
aukko: 2rem;
}
}
Pienillä näytöillä selain pinoaa kaiken yhteen sarakkeeseen. Mutta sinun ei tarvitse määrittää sitä, koska selain käyttää näyttö: lohko oletuksena. Olet siis käyttänyt mediakyselyitä vain monimutkaisuuden lisäämiseen.
Sen sijaan, että lisäisit monimutkaisuutta ja joutuisit ohittamaan joukon ominaisuuksia, lisäät nyt monimutkaisuutta tarvittaessa. Suurimman osan ajasta tarvitset vain min-leveys mediakyselyt. Aloita ensin mobiililaitteilla ja sitten kun sivusto näyttää hyvältä mobiililaitteella, lisää monimutkaisuus (esim. sarakkeet) työpöytäversioon.
5. Hyödynnä modernia CSS: ää
Nykyaikaisten CSS-lähestymistapojen avulla pääset eroon useimmista kohdistusongelmista ja keskeytyspisteistä ja voit siirtyä kohti luontaista suunnittelua.
Yksi tapa, jolla voit tehdä sen, on:
h1 { font-size: clamp (3rem, 1rem + 10vw, 7rem)}
Tämä puristaa h1 pienimmän ja suurimman kirjasinkoon välillä. Pienin, johon haluamme sen menevän 3rem ja korkein on 7rem. Keskimmäinen on se, mitä toistamme (1rem + 10 vw). Tämän seurauksena otsikko pienenee automaattisesti, kun näkymä pienenee ja kasvaa sitä suuremmaksi.
Lisätietoja modernista CSS: stä
CSS on kehittynyt paljon vuosien varrella. Tänään meillä on uudempia ja parempia lähestymistapoja elementtien sijoittamiseen CSS: ssä. Tässä artikkelissa käsittelimme joitain näistä käytännöistä ja korostimme, kuinka ne voivat auttaa sinua välttämään yleisiä suunnittelun sudenkuoppia. Yksi parhaista tavoista oppia nykyaikaista CSS: ää on käytännönläheinen lähestymistapa, kuten nykyaikaisen CSS: n käyttäminen HTML-taulukon suunnittelussa.