Lär dig responsiv CSS-design – 1

Programmerare gillar inte GUI (Graphic User Interface) Design. Därför är CSS (Cascade Style Sheet) inte deras grej. Jag har alltid vetat att det finns visningsproblem på smarta telefoner/enheter där bredden på skärmen (webbläsaren) är liten och smal. Den här bloggen var i en total röra innan när jag tittade på min Samsung Gallery S3-smarttelefon.

Det beror på att jag valde en mall som fungerar bäst för stationära datorer med bredare skärmar. Jag hade inte tid och ville inte ändra på det förrän jag såg besöksstatistik i Google Analytic. Uppenbarligen växer siffran betydligt för besökare som kommer från smarta telefoner/enheter.

WordPressen eller kanske temauppgraderingen förbättrades mycket. Om du nu begränsar bredden på webbläsaren för att simulera smarta telefoner, kan du se att sidan inte är riktigt dålig men den är inte perfekt heller och kräver manuella justeringar.

Så, vad är en responsiv CSS? Ordet responsiv betyder att, enligt min mening, kommer CSS att anpassas efter olika situationer (t.ex. skärmens bredd). Har du märkt att det övre vänstra hörnet på denna sida finns en ikon vertikalt verktygsfält. Det ser bra ut när det är bredare, men i smal bredd kommer detta att kollapsa med huvudinnehållet och göra det till en riktigt ful användarupplevelse. Jag bestämmer mig för att dölja detta när skärmens bredd är liten.

Så följande är en snabb startpunkt för responsiv CSS.

I grund och botten definierar ovanstående CSS klassen topleft, och den andra raden kommer att kontrollera om bredden på den aktuella sidan (webbläsare, skärm) är större än 1100 pixlar, om inte, kommer topleft att omdefinieras som dold.

För att använda det, inkludera det helt enkelt så här…

Nu behöver du inte ens uppdatera sidan, CSS kommer att reagera direkt när skärmens bredd faller under 1100px. Om du till exempel tittar på iPad, och när du vänder 90 grader från liggande till vertikalt, kommer CSS-koden att vara responsiv och ikonerna kommer att döljas.