{"id":127,"date":"2026-03-09T10:05:57","date_gmt":"2026-03-09T10:05:57","guid":{"rendered":"https:\/\/skola.als080613mj.hemsida.eu\/?p=127"},"modified":"2026-03-31T10:10:07","modified_gmt":"2026-03-31T10:10:07","slug":"moment-6-responsiv-design","status":"publish","type":"post","link":"https:\/\/skola.als080613mj.hemsida.eu\/index.php\/2026\/03\/09\/moment-6-responsiv-design\/","title":{"rendered":"Moment 6 – Responsiv Design"},"content":{"rendered":"\n

I moment 6 – responsiv deign har jag gjort tv\u00e5 versioner av Markdown sidan fr\u00e5n moment 3. I den f\u00f6rsta varianten som du hittar h\u00e4r<\/a> anv\u00e4nde jag mig av tenkniker s\u00e5 som relativa enheter, media queries, flexbox\/grid och css variabler f\u00f6r att g\u00f6ra sidan responsiv till olika anv\u00e4ndarenheter.<\/p>\n\n\n\n

Jag tycker inte att n\u00e5got var s\u00e4rskilt utmanande. Jag har anv\u00e4nt flex\/grid ganska mycket innan moment 6 och anv\u00e4nder det bekv\u00e4mt. \u00c4ven resterande kunskaper har jag bekantat mig med till en viss del innan och hade inga st\u00f6rre problem med att implementera. F\u00f6r att f\u00e5 responsivitet f\u00f6r olika sk\u00e4rmar har jag f\u00f6r det mesta anv\u00e4nt media queries.<\/p>\n\n\n\n

\n\n\n\n

Den andra varianten jag gjorde av markdown s\u00e5 anv\u00e4nde jag mig av ramverket materialize, det kan du hitta h\u00e4r<\/a>. Jag kompletterade \u00e4ven med lite egen CSS f\u00f6r lite sm\u00e5saker jag inte kunde g\u00f6ra med materialize, till exempel g\u00f6ra s\u00e5 att <body> element inte tar upp 100% av bredden vid stora sk\u00e4rmar.<\/p>\n\n\n\n

\n\n\n\n

H\u00e4r \u00e4r resultat f\u00f6r Markdown sidan innan<\/strong> n\u00e5gra f\u00f6r\u00e4ndringar: Det st\u00e5r att sidan \u00e4r mobilanpassad men som vi kan se det beter den sig konstigt.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Resultat f\u00f6r Responsiv Markdown sida: Man kan de att sidan \u00e4r b\u00e4ttre anpassad f\u00f6r sm\u00e5 sk\u00e4rmar. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Resultat av Markdown gjort med materialize: Av n\u00e5gon anledning s\u00e5 \u00e4r huvudrubriken svart, inte centrerad och v\u00e4ldigt liten vilket den inte \u00e4r p\u00e5 en faktiskt mobilenhet.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"

I moment 6 – responsiv deign har jag gjort tv\u00e5 versioner av Markdown sidan fr\u00e5n moment 3. I den f\u00f6rsta varianten som du hittar h\u00e4r anv\u00e4nde jag mig av tenkniker s\u00e5 som relativa enheter, media queries, flexbox\/grid och css variabler f\u00f6r att g\u00f6ra sidan responsiv till olika anv\u00e4ndarenheter. Jag tycker inte att n\u00e5got var s\u00e4rskilt […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[9],"class_list":["post-127","post","type-post","status-publish","format-standard","hentry","category-webbutveckling","tag-moment6"],"_links":{"self":[{"href":"https:\/\/skola.als080613mj.hemsida.eu\/index.php\/wp-json\/wp\/v2\/posts\/127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/skola.als080613mj.hemsida.eu\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/skola.als080613mj.hemsida.eu\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/skola.als080613mj.hemsida.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/skola.als080613mj.hemsida.eu\/index.php\/wp-json\/wp\/v2\/comments?post=127"}],"version-history":[{"count":3,"href":"https:\/\/skola.als080613mj.hemsida.eu\/index.php\/wp-json\/wp\/v2\/posts\/127\/revisions"}],"predecessor-version":[{"id":137,"href":"https:\/\/skola.als080613mj.hemsida.eu\/index.php\/wp-json\/wp\/v2\/posts\/127\/revisions\/137"}],"wp:attachment":[{"href":"https:\/\/skola.als080613mj.hemsida.eu\/index.php\/wp-json\/wp\/v2\/media?parent=127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/skola.als080613mj.hemsida.eu\/index.php\/wp-json\/wp\/v2\/categories?post=127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/skola.als080613mj.hemsida.eu\/index.php\/wp-json\/wp\/v2\/tags?post=127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}