Hur man gör en responsiv mobilwebbplats i AJAX för HTML5 och CSS3-programmering - dummies

HTML-utvecklare och webbutvecklare kan använda AJAX för att skapa en mottaglig mobil webbplats. Ett sätt att få en webbplats att fungera bra på flera upplösningar är att tillhandahålla olika CSS-regler baserat på den upptäckta medietypen.

CSS3 har en fantastisk ny funktion som heter mediasökning, som låter dig ange en mediatyp och bestämma olika funktioner på displayen. Du kan använda denna specifikation för att bygga en delmängd av CSS som ska användas när webbläsaren upptäcker en viss typ eller bildstorlek.

Ange en medietyp

Med regeln @media kan du ange vilken typ av utmatning den medföljande CSS ska modifiera. De vanligaste mediatyperna är skärm, skriv ut, tal, handhållen, projektion och tv. Det finns mer, men bara tryck och skärm stöds universellt.

Exempelvis kommer följande kod att ange teckensnittstorlek när användaren skriver ut dokumentet:

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

Denna CSS kan inbäddas i en vanlig CSS dokument, men det bör normalt placeras i slutet av dokumentet eftersom det innehåller undantag från de normala reglerna. Du kan placera så mycket CSS-kod som du vill inom @media-elementet, men du bör bara sätta CSS-kod som är relevant för den specifika situationen du är intresserad av.

Så här lägger du till en kvalificering

Förutom att specificera medietypen har @media-regeln ett annat mycket kraftfullt trick. Du kan ansöka ett speciellt kvalificerat villkor för media.

När webbläsaren är större än 500 pixlar kan du se svart text på en vit bakgrund. Men gör skärmen smalare, och du ser något intressant.

Normalt skulle du använda det här tricket för att ändra layouten, men börja med det enklare färgförändringsexemplet. Här är koden för det enklare exemplet:

narrowBlack. html kropp {färg: svart; bakgrundsfärg: vit;} @media (maxbredd: 500px) {kropp {färg: vit; bakgrundsfärg: svart;}}

Qualifier Demo
Försök ändra storlek på den här sidan. När sidan är bredare än 500 pixlar, visar den svart text på en vit bakgrund.
När sidan är smalare än 500 pixlar, vänds färgerna, vilket ger vit text på en svart bakgrund.

Så här bygger du en sida som anpassar sig till skärmens bredd:

1. Bygg din webbplats som vanligt.

   Det här är en plats där hela det "separata innehållet från layout" saknar verkligen. Samma HTML-kod kommer att ha två olika stilar.

2. Applicera en CSS-stil på normalt sätt.

   Bygg din standardstil på normalt sätt - för nu, bädda in stilen på sidan med taggen.Din huvudsakliga stil ska hantera det vanligaste fallet. (Vanligen en skrivbords i full storlek.)

3. Bygg en @media-regel.

   Regeln @media CSS ska gå i slutet av den normala CSS.

4. Ange en maxbredd: 500px-kvalifierare.

   Denna kvalificering indikerar att reglerna inom det här segmentet endast kommer att användas om skärmens bredd är mindre än 500 pixlar.

5. Placera specialfall i den nya stilen.

   Alla CSS-regler du definierar inuti @media-regeln aktiveras om kvalifikatorn är sann. Använd dessa regler för att åsidosätta befintliga CSS. Observera att du inte behöver omdefiniera allt. Ge bara regler som är meningsfulla i ditt specifika sammanhang.

6. Lägg till ett visningsport.

   Mobila webbläsare försöker ibland att skifta sidan så att det alla kan ses samtidigt. Detta besegrar syftet med en speciell stil, så använd visningsmetatag för att indikera att webbläsaren ska rapportera sin sanna bredd. Det är också ofta användbart att stänga av sidoskalning eftersom det inte längre behöver vara nödvändigt.

I det här exemplet tillämpar webbläsaren alltid den huvudsakliga (svarta texten i en vit bakgrund) stil. Då tittar det på @media-regeln för att se om kvalifikationen är sann.

Om bredden är mindre än 500 pixlar utvärderas maxbredden: 500px-kvalifikatorn till sann, och all CSS-koden i segmentet @media är aktiverad. Webbläsaren lagrar sedan båda uppsättningarna av CSS och tillämpar rätt CSS baserat på regelns status.