Hvordan lage et responsivt mobilnettsted i AJAX for HTML5 og CSS3 Programmering - dummies

HTML5 og CSS3 webutviklere kan bruke AJAX til å gi et responsivt mobilnettsted. En måte å få et nettsted til å fungere bra på flere oppløsninger er å gi forskjellige CSS-regler basert på den oppdagede medietypen.

CSS3 har en nydelig ny funksjon kalt media spørringen, som lar deg spesifisere en medietype og bestemme ulike funksjoner på skjermen. Du kan bruke denne spesifikasjonen til å bygge en delmengde av CSS som skal brukes når nettleseren oppdager en viss type eller størrelse på skjermen.

Angi en medietype

Med regelen @media kan du spesifisere hvilken type utgang det medfølgende CSS skal modifisere. De vanligste mediatypene er skjerm, utskrift, tale, håndholdt, projeksjon og tv. Det er flere, men bare utskrift og skjerm er universelt støttet.

For eksempel vil følgende kode spesifisere skriftstørrelsen når brukeren skriver ut dokumentet:

@media print {body {font-size: 10pt;}

Dette CSS kan legges inn i en vanlig CSS dokument, men det bør vanligvis plasseres på slutten av dokumentet fordi det inneholder unntak fra de vanlige reglene. Du kan plassere så mye CSS-kode som du ønsker i @media-elementet, men du bør bare sette CSS-kode som er relevant for den spesifikke situasjonen du er interessert i.

Slik legger du til en kvalifisering

I tillegg til å spesifisere medietypen, har @media-regelen et annet veldig kraftig knep. Du kan bruke en spesiell kvalifiserende tilstand til media.

Når nettleseren er bredere enn 500 piksler, kan du se svart tekst på en hvit bakgrunn. Men gjør skjermen smalere, og du ser noe interessant.

Normalt vil du bruke dette trikset til å endre oppsettet, men begynn med dette enklere fargeskiftende eksempelet. Her er koden for dette enklere eksempelet:

narrowBlack. html body {color: black; bakgrunnsfarge: hvit;} @media (maksimal bredde: 500px) {kropp {farge: hvit; bakgrunnsfarge: svart;}}

Qualifier Demo
Prøv å endre størrelsen på denne siden. Når siden er bredere enn 500 piksler, viser den svart tekst på en hvit bakgrunn.
Når siden er smalere enn 500 piksler, reverseres fargene, og gir hvit tekst på svart bakgrunn.

Slik bygger du en side som tilpasser seg skjermbredden:

1. Bygg nettstedet ditt som vanlig.

   Dette er ett sted hvor hele det "separate innholdet fra oppsettet" virkelig lønner seg. Den samme HTML-filen har to forskjellige stiler.

2. Bruk en CSS-stil på vanlig måte.

   Bygg standard stilen din på vanlig måte - for nå, legg inn stilen på siden med taggen.Din hovedstil bør håndtere det vanligste tilfellet. (Vanligvis et skrivebord i full størrelse.)

3. Bygg en @media-regel.

   Regelen @media CSS skal gå på slutten av det vanlige CSS.

4. Sett en maksimal bredde: 500px kvalifisering.

   Denne kvalifiseringen indikerer at reglene i dette segmentet bare vil bli brukt hvis skjermbredden er mindre enn 500 piksler.

5. Legg spesielle sakregler i det nye stilsettet.

   Alle CSS-regler du definerer inne i @media-regelen vil bli aktivert hvis kvalifiseringen er sann. Bruk disse reglene for å overstyre eksisterende CSS. Merk at du ikke trenger å omdefinere alt. Bare gi regler som gir mening i din spesielle kontekst.

6. Legg til et visningsport.

   Mobile browsere vil noen ganger prøve å rescale siden slik at den alle kan ses samtidig. Dette beseirer formålet med en spesiell stil, så bruk visningsport metatag for å indikere at nettleseren skal rapportere sin ekte bredde. Det er også ofte nyttig å slå av sideskalering fordi det ikke lenger er nødvendig.

I dette eksemplet bruker nettleseren alltid den viktigste (svarte teksten på en hvit bakgrunn) stil. Så ser det på @media-regelen for å se om kvalifiseringen er sann.

Hvis bredden er mindre enn 500 piksler, vurderes maksimalbredden: 500px-kvalifiseringen til ekte, og all CSS-koden i @media-segmentet er aktivert. Nettleseren lagrer da begge settene CSS og bruker riktig CSS basert på statusen til regelen.