Hvordan man laver et responsivt mobilwebsted i AJAX til HTML5 og CSS3 Programmering - dummies

HTML5 og CSS3 webudviklere kan bruge AJAX til at gøre et lydhurtigt mobilsite. En måde at få et websted til at fungere godt på flere opløsninger er at give forskellige CSS-regler baseret på den registrerede medietype.

CSS3 har en fantastisk ny funktion kaldet medie forespørgsel, , som giver dig mulighed for at angive en medietype og bestemme forskellige funktioner på displayet. Du kan bruge denne specifikation til at opbygge en delmængde af CSS'en, der skal bruges, når browseren registrerer en bestemt type eller størrelse på displayet.

Angiv en medietype

Med reglen @media kan du angive, hvilken type output det medfølgende CSS skal ændre. De mest almindelige medietyper er skærm, print, tale, håndholdt, projektion og tv. Der er flere, men kun print og skærm er universelt understøttet.

F.eks. Vil den følgende kode angive skrifttypestørrelsen, når brugeren udskriver dokumentet:

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

Denne CSS kan indlejres i en normal CSS dokument, men det skal typisk placeres i slutningen af ​​dokumentet, fordi det indeholder undtagelser fra de normale regler. Du kan placere så meget CSS-kode som du ønsker inden for @media-elementet, men du bør kun anbringe CSS-kode, der er relevant for den specifikke situation, du er interesseret i.

Sådan tilføjes en kvalifikation

Ud over at specificere medietypen har @media-reglen et andet meget kraftigt trick. Du kan anvende en særlig kvalificeret betingelse for medierne.

Når browseren er bredere end 500 pixels, kan du se sort tekst på en hvid baggrund. Men gør skærmen smalere, og du ser noget interessant.

Normalt vil du bruge dette trick til at ændre layoutet, men start med dette enklere farveændringseksempel. Her er koden til dette enklere eksempel:

narrowBlack. html krop {farve: sort; baggrundsfarve: hvid;} @media (maksimal bredde: 500px) {krop {farve: hvid; baggrundsfarve: sort;}}

Qualifier Demo
Prøv at ændre størrelsen på denne side. Når siden er bredere end 500 pixels, viser den sort tekst på en hvid baggrund.
Når siden er snævrere end 500 pixels, vender farverne omvendt, hvilket giver hvid tekst på en sort baggrund.

Sådan bygger du en side, der tilpasser sig skærmens bredde:

1. Bygg dit websted som normalt.

   Dette er et sted, hvor hele det "separate indhold fra layout" ting virkelig betaler sig. Den samme HTML har to forskellige stilarter.

2. Anvend en CSS-stil på normal måde.

   Opbyg din standard stil på den normale måde - Indsæt nu stilen på siden med tagget.Din hovedstil skal håndtere det mest almindelige tilfælde. (Typisk et skrivebord i fuld størrelse.)

3. Byg en @media-regel.

   @media CSS-reglen skal gå i slutningen af ​​det normale CSS.

4. Indstil en maxbredde: 500px kvalifikator.

   Denne kvalifikation indikerer, at reglerne i dette segment kun vil blive brugt, hvis skærmens bredde er mindre end 500 pixels.

5. Anbring særlige tilfælde i det nye stilsæt.

   Alle CSS-regler, du definerer inde i @media-reglen, vil blive aktiveret, hvis kvalifikatoren er sand. Brug disse regler til at tilsidesætte det eksisterende CSS. Bemærk, at du ikke skal omdefinere alt. Giv bare regler, der giver mening i din særlige sammenhæng.

6. Tilføj et visningsport.

   Mobilbrowsere vil undertiden forsøge at omskalere siden, så det kan alle ses på én gang. Dette besejrer formålet med en særlig stil, så brug visningsmetatheden til at angive, at browseren skal rapportere sin ægte bredde. Det er også ofte nyttigt at slukke for sideskalering, fordi det ikke længere skal være nødvendigt.

I dette eksempel bruger browseren altid den primære (sort tekst på en hvid baggrund) stil. Så ser det på @media-reglen for at se om kvalifikationen er sand.

Hvis bredden er mindre end 500 pixels, vurderes maksimalbredden: 500px-kvalifikatoren til sand, og alle CSS-kode inden for segmentet @media er aktiveret. Browseren gemmer derefter begge sæt CSS og anvender den korrekte CSS baseret på statens status.