(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{525:function(t,e,s){t.exports=s.p+"assets/img/grid-example-with-nav-and-sidebar.f43c6161.png"},526:function(t,e,s){t.exports=s.p+"assets/img/grid-example-small-content.6024f6fe.png"},527:function(t,e,s){t.exports=s.p+"assets/img/grid-example-one-column.4b5326ae.png"},703:function(t,e,s){"use strict";s.r(e);var a=s(56),n=Object(a.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"how-do-css-media-queries-work"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#how-do-css-media-queries-work"}},[t._v("#")]),t._v(" How do CSS Media Queries work?")]),t._v(" "),a("p",[t._v("CSS Media Queries"),a("sup",{staticClass:"footnote-ref"},[a("a",{attrs:{href:"#fn1",id:"fnref1"}},[t._v("[1]")])]),t._v(" allow us to write some CSS that will only be applied under certain conditions, such as:")]),t._v(" "),a("ul",[a("li",[t._v("Media features (screen size, orientation, etc)")]),t._v(" "),a("li",[t._v("Media type (screen, print, etc)")])]),t._v(" "),a("p",[t._v("The syntax is a little bit confusing, although there are plans to improve the syntax in the future"),a("sup",{staticClass:"footnote-ref"},[a("a",{attrs:{href:"#fn2",id:"fnref2"}},[t._v("[2]")])]),t._v(".")]),t._v(" "),a("p",[t._v("For now though, this is how you do it:")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".grid")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" grid"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("grid-template-columns")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 300px 1fr"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("grid-template-areas")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"header header"')]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"sidebar content"')]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('". footer"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("That would define a grid as we did in the last example of the previous lecture. It could look like this:")]),t._v(" "),a("p",[a("img",{attrs:{src:s(525),alt:"Grid example with a header, sidebar, content, and footer"}})]),t._v(" "),a("p",[t._v("But when the screen gets smaller, you run into problems because the sidebar column is always "),a("code",[t._v("300px")]),t._v(":")]),t._v(" "),a("p",[a("img",{attrs:{src:s(526),alt:"Grid example from above, but with a tiny screen that shrinks the content cell too much"}})]),t._v(" "),a("p",[t._v("A frequently used option is to change things so the sidebar is above the content when the screen is very small. Here's how to do that using a media query:")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".grid")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" grid"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("grid-template-columns")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 300px 1fr"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("grid-template-areas")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"header header"')]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"sidebar content"')]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('". footer"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token atrule"}},[a("span",{pre:!0,attrs:{class:"token rule"}},[t._v("@media")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("max-width")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 720px"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".grid")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("grid-template-columns")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1fr"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("grid-template-areas")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"header"')]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"sidebar"')]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"content"')]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"footer"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),a("p",[t._v("Inside a media query you don't have to change all properties. If untouched, properties remain as defined for the element outside the media query.")])]),t._v(" "),a("p",[t._v("You can also define multiple media queries so that as the screen gets smaller, certain properties change.")]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),a("p",[t._v("It's also possible to go the other round and have the smallest-screen properties defined globally, and then use media queries as the screen size increases. We'll do this in the next project.")])]),t._v(" "),a("p",[t._v("With this CSS change, we get what we wanted:")]),t._v(" "),a("p",[a("img",{attrs:{src:s(527),alt:"Grid all in one column to allow content to be placed without shrinking too much"}})]),t._v(" "),a("p",[t._v("With media queries, CSS can get a bit bloated--because the same elements are targeted many times, once per media query.")]),t._v(" "),a("p",[t._v("That's why CSS also allows media queries when we define a "),a("code",[t._v("link")]),t._v(" element to a CSS stylesheet:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("link")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("href")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("global.css"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("rel")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylesheet"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("link")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("href")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("mobile.css"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("rel")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylesheet"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("media")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("screen and (max-width: 600px)"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("This would let you define a separate "),a("code",[t._v("mobile.css")]),t._v(" file that is applied "),a("em",[t._v("after")]),t._v(" "),a("code",[t._v("global.css")]),t._v(" and can overwrite the CSS properties applied to any element while the width of the screen is less than 600px.")]),t._v(" "),a("p",[t._v("I don't use this feature often, because I quite like having related CSS selectors and properties together. I find it easier to see all the different changes that could be applied to an element, in a single file.")]),t._v(" "),a("p",[t._v("However if there are a lot of changes being applied, I will consider using this method so the CSS file doesn't get too long and difficult to read.")]),t._v(" "),a("hr",{staticClass:"footnotes-sep"}),t._v(" "),a("section",{staticClass:"footnotes"},[a("ol",{staticClass:"footnotes-list"},[a("li",{staticClass:"footnote-item",attrs:{id:"fn1"}},[a("p",[a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries",target:"_blank",rel:"noopener noreferrer"}},[t._v("Using media queries (MDN Documentation)"),a("OutboundLink")],1),t._v(" "),a("a",{staticClass:"footnote-backref",attrs:{href:"#fnref1"}},[t._v("↩︎")])])]),t._v(" "),a("li",{staticClass:"footnote-item",attrs:{id:"fn2"}},[a("p",[a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#syntax_improvements_in_level_4",target:"_blank",rel:"noopener noreferrer"}},[t._v("Syntax improvement for media queries (not well supported yet, MDN Documentation)"),a("OutboundLink")],1),t._v(" "),a("a",{staticClass:"footnote-backref",attrs:{href:"#fnref2"}},[t._v("↩︎")])])])])])])}),[],!1,null,null,null);e.default=n.exports}}]);