Programmerare gillar inte GUI (Graphic User Interface) Design. D\u00e4rf\u00f6r \u00e4r CSS (Cascade Style Sheet) inte deras grej. Jag har alltid vetat att det finns visningsproblem p\u00e5 smarta telefoner\/enheter d\u00e4r bredden p\u00e5 sk\u00e4rmen (webbl\u00e4saren) \u00e4r liten och smal. Den h\u00e4r bloggen var i en total r\u00f6ra innan n\u00e4r jag tittade p\u00e5 min Samsung Gallery S3-smarttelefon.<\/p>\n
Det beror p\u00e5 att jag valde en mall som fungerar b\u00e4st f\u00f6r station\u00e4ra datorer med bredare sk\u00e4rmar. Jag hade inte tid och ville inte \u00e4ndra p\u00e5 det f\u00f6rr\u00e4n jag s\u00e5g bes\u00f6ksstatistik i Google Analytic. Uppenbarligen v\u00e4xer siffran betydligt f\u00f6r bes\u00f6kare som kommer fr\u00e5n smarta telefoner\/enheter.<\/p>\n
WordPressen eller kanske temauppgraderingen f\u00f6rb\u00e4ttrades mycket. Om du nu begr\u00e4nsar bredden p\u00e5 webbl\u00e4saren f\u00f6r att simulera smarta telefoner, kan du se att sidan inte \u00e4r riktigt d\u00e5lig men den \u00e4r inte perfekt heller och kr\u00e4ver manuella justeringar.<\/p>\n
S\u00e5, vad \u00e4r en responsiv CSS? Ordet responsiv betyder att, enligt min mening, kommer CSS att anpassas efter olika situationer (t.ex. sk\u00e4rmens bredd). Har du m\u00e4rkt att det \u00f6vre v\u00e4nstra h\u00f6rnet p\u00e5 denna sida finns en ikon vertikalt verktygsf\u00e4lt. Det ser bra ut n\u00e4r det \u00e4r bredare, men i smal bredd kommer detta att kollapsa med huvudinneh\u00e5llet och g\u00f6ra det till en riktigt ful anv\u00e4ndarupplevelse. Jag best\u00e4mmer mig f\u00f6r att d\u00f6lja detta n\u00e4r sk\u00e4rmens bredd \u00e4r liten.<\/p>\n
S\u00e5 f\u00f6ljande \u00e4r en snabb startpunkt f\u00f6r responsiv CSS.<\/p>\n
<style>\n.topleft { position:fixed;left:5px;top:15px; }\n@media(max-width: 1100px) { .topleft { display:none } }\n<\/style><\/code><\/pre>\nI grund och botten definierar ovanst\u00e5ende CSS klassen<\/strong> topleft, och den andra raden kommer att kontrollera om bredden p\u00e5 den aktuella sidan (webbl\u00e4sare, sk\u00e4rm) \u00e4r st\u00f6rre \u00e4n 1100 pixlar, om inte, kommer topleft att omdefinieras som dold.<\/p>\nF\u00f6r att anv\u00e4nda det, inkludera det helt enkelt s\u00e5 h\u00e4r…<\/p>\n
<div class='topleft'>\n <!-- top-left icons placed here for <\/code><\/pre>\nNu beh\u00f6ver du inte ens uppdatera sidan, CSS kommer att reagera direkt n\u00e4r sk\u00e4rmens bredd faller under 1100px. Om du till exempel tittar p\u00e5 iPad, och n\u00e4r du v\u00e4nder 90 grader fr\u00e5n liggande till vertikalt, kommer CSS-koden att vara responsiv och ikonerna kommer att d\u00f6ljas.<\/p>\n