{"id":321,"date":"2021-06-08T18:58:47","date_gmt":"2021-06-08T17:58:47","guid":{"rendered":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/?page_id=321"},"modified":"2021-06-10T12:12:33","modified_gmt":"2021-06-10T11:12:33","slug":"media-queries","status":"publish","type":"page","link":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/css\/media-queries\/","title":{"rendered":"Media Queries"},"content":{"rendered":"<p>The display of <strong>responsive pages<\/strong> <img decoding=\"async\" class=\"alignright wp-image-196\" src=\"https:\/\/glow-prod-sh.s3.eu-west-1.amazonaws.com\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2021\/06\/05211152\/sqa-ah-150x150.png?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&#038;X-Amz-Security-Token=IQoJb3JpZ2luX2VjEL%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCWV1LXdlc3QtMSJHMEUCIBDgcfUkPaZLd9TCiw2gucLQ%2BWc4ST8pu1N3pEzezzp%2FAiEA38sYCOHgKZpw9VYTJ6aoss%2BdFFN%2BFsuDcA%2Bq0df9EkcqwgUIiP%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FARAFGgwyNzM1NzAxOTU0MzMiDFuOu4Wm6oNHZslS5SqWBcuVLWWB0lyhSRm77CH%2FO38fULhYZZSq4eqq4IQ9j2uRR2FF7hc98S%2BuchhpU8tpM66ApTUVpolPCUL9TjiQbAcH7EMLMXZejqp3xp8pOUUFPOBkRUYlw0rZWZq5Es7B9R6ALocNaCL0TQhLVrOO8HPz9czjh1a8d3ytvdOvDDT9CZGp00C0sLpNMNvSjt%2FU%2FR%2FZJTIXfeNrqZh4dYitCQryyAYhg7cI5A5%2BBUWFRX4HJ92K3CsLhfDRaP2uycVPQn6YRLPJgbZcogFxfViCPQpsAv0MrbfDJj%2F%2F5Djyd3rnkoJypkQ1tj46ifvW%2F0mtufjfH8Ms04RUG1qIRGdy3rJTGGerDI%2Fn49DACbIoQPp17rY43pq8Ck6WqEQ7rU%2FXtTE891x7SWRXGou5M8OoSVolF5nL%2Bn%2F1jqc%2FFopiOb0YDgE%2BWmd5RlXikVlElT59kFen8rDjEFK3r%2FUu8L6%2B988qnuMmufOmlZQRMvbFrtJBmEzm8lXgl6H%2FJbf4FQnuSr2r9hQPx3jToVvU8Y7nAC7mIA%2FiWr8TVM8bjxJEsrJqHetz%2BJLzMlvlYY6X4YNtIfjZhIcHeNK6fZhtP9ZUBXTRgLJIAuiQwtZcuiaOG%2Ffoq4FDQOq07sCH96EpRupEEt6GyljdXIiI4gvp7g2RNR8AX8uYxB%2Ftp1VTZjfIfiPl1RyHDk7dp4VBoSyAr3h9fVQHUN71e6p6XUgpp4eJtc%2Fh730tYZMF8s5fWhnKuk24Mp4svgw%2Ff63OoCxDgd%2FGYpTcv7ztYeNgEFPEM5RNbBrojSBiOFp3oztr8j4Npx2gW7Ro1RXC2og9CSr2iKk5SkScTENHks1hM19y9jLhDuZ%2Bqq9%2B%2BzMt0XJSMRmhgOOTesGDgR8EMLKAi9UGOrEBAorQkpKTVRK6QgpaI3tMaIKUMbKoxmNhsG31CT73SLOGnXcBHkSt2PeJ97IpzVJjv7p9IqmLA%2FABvBD%2BxRx7NSuJrFxEEXCEz4bmiUm05qAblGVF9IY4q0KqSgGtilE6VWkIQcYlVG%2Bc%2B6NmFnT5fGi8RpRFS%2FKxmwI%2B7Q7nFG%2BcGeyxtkIsuGUPWc0mx%2B%2BpOYsZ%2BSRwVZ6qRX2AP0pGeClgG%2FRA5qcPWdYCTVuotBut&#038;X-Amz-Algorithm=AWS4-HMAC-SHA256&#038;X-Amz-Credential=ASIAT7MQN47URKUPHT3X%2F20260910%2Feu-west-1%2Fs3%2Faws4_request&#038;X-Amz-Date=20260910T143543Z&#038;X-Amz-SignedHeaders=host&#038;X-Amz-Expires=900&#038;X-Amz-Signature=78a648d215b0254e00ff92b773484740e64f9abd9361875faab14c157cd7dd63\" alt=\"\" width=\"100\" height=\"97\" \/><a href=\"https:\/\/www.w3schools.com\/css\/css3_mediaqueries.asp\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"image-59 alignright\" src=\"https:\/\/glow-prod-sh.s3.eu-west-1.amazonaws.com\/sh\/public\/ahscomputinghtml\/uploads\/sites\/3275\/2021\/06\/03210120\/w3schools-150x150.png?X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&#038;X-Amz-Security-Token=IQoJb3JpZ2luX2VjEL%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCWV1LXdlc3QtMSJHMEUCIBDgcfUkPaZLd9TCiw2gucLQ%2BWc4ST8pu1N3pEzezzp%2FAiEA38sYCOHgKZpw9VYTJ6aoss%2BdFFN%2BFsuDcA%2Bq0df9EkcqwgUIiP%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FARAFGgwyNzM1NzAxOTU0MzMiDFuOu4Wm6oNHZslS5SqWBcuVLWWB0lyhSRm77CH%2FO38fULhYZZSq4eqq4IQ9j2uRR2FF7hc98S%2BuchhpU8tpM66ApTUVpolPCUL9TjiQbAcH7EMLMXZejqp3xp8pOUUFPOBkRUYlw0rZWZq5Es7B9R6ALocNaCL0TQhLVrOO8HPz9czjh1a8d3ytvdOvDDT9CZGp00C0sLpNMNvSjt%2FU%2FR%2FZJTIXfeNrqZh4dYitCQryyAYhg7cI5A5%2BBUWFRX4HJ92K3CsLhfDRaP2uycVPQn6YRLPJgbZcogFxfViCPQpsAv0MrbfDJj%2F%2F5Djyd3rnkoJypkQ1tj46ifvW%2F0mtufjfH8Ms04RUG1qIRGdy3rJTGGerDI%2Fn49DACbIoQPp17rY43pq8Ck6WqEQ7rU%2FXtTE891x7SWRXGou5M8OoSVolF5nL%2Bn%2F1jqc%2FFopiOb0YDgE%2BWmd5RlXikVlElT59kFen8rDjEFK3r%2FUu8L6%2B988qnuMmufOmlZQRMvbFrtJBmEzm8lXgl6H%2FJbf4FQnuSr2r9hQPx3jToVvU8Y7nAC7mIA%2FiWr8TVM8bjxJEsrJqHetz%2BJLzMlvlYY6X4YNtIfjZhIcHeNK6fZhtP9ZUBXTRgLJIAuiQwtZcuiaOG%2Ffoq4FDQOq07sCH96EpRupEEt6GyljdXIiI4gvp7g2RNR8AX8uYxB%2Ftp1VTZjfIfiPl1RyHDk7dp4VBoSyAr3h9fVQHUN71e6p6XUgpp4eJtc%2Fh730tYZMF8s5fWhnKuk24Mp4svgw%2Ff63OoCxDgd%2FGYpTcv7ztYeNgEFPEM5RNbBrojSBiOFp3oztr8j4Npx2gW7Ro1RXC2og9CSr2iKk5SkScTENHks1hM19y9jLhDuZ%2Bqq9%2B%2BzMt0XJSMRmhgOOTesGDgR8EMLKAi9UGOrEBAorQkpKTVRK6QgpaI3tMaIKUMbKoxmNhsG31CT73SLOGnXcBHkSt2PeJ97IpzVJjv7p9IqmLA%2FABvBD%2BxRx7NSuJrFxEEXCEz4bmiUm05qAblGVF9IY4q0KqSgGtilE6VWkIQcYlVG%2Bc%2B6NmFnT5fGi8RpRFS%2FKxmwI%2B7Q7nFG%2BcGeyxtkIsuGUPWc0mx%2B%2BpOYsZ%2BSRwVZ6qRX2AP0pGeClgG%2FRA5qcPWdYCTVuotBut&#038;X-Amz-Algorithm=AWS4-HMAC-SHA256&#038;X-Amz-Credential=ASIAT7MQN47URKUPHT3X%2F20260910%2Feu-west-1%2Fs3%2Faws4_request&#038;X-Amz-Date=20260910T143543Z&#038;X-Amz-SignedHeaders=host&#038;X-Amz-Expires=900&#038;X-Amz-Signature=8f4f972d10e0cf3ca86ce3f138c6aa9c25f6e8f7e9c71a71a3e6941a8668b44a\" alt=\"\" width=\"50\" height=\"47\" \/><\/a>will change depending on the device or window on which they are to be viewed.<\/p>\n<p>Common uses for responsive pages is for:<\/p>\n<ul>\n<li>printing on paper\/PDF<br \/>\n(hiding unnecessary page elements, using black on white text)<\/li>\n<li>screens with narrower displays (tablets\/smartphones)<br \/>\n(replacing a horizonal navigation bar with a vertical, or hamburger menu)<\/li>\n<\/ul>\n<p>Within the CSS, default values are written first, with media queries defined underneath. When coding media queries, only the changes are styled.<\/p>\n<pre class=\"brush: css; title: CSS Syntax; notranslate\" title=\"CSS Syntax\">\r\n@media not|only mediatype and (expressions) {\r\n    CSS Code;\r\n}\r\n<\/pre>\n<p>Three media types are in the Advanced Higher course: <strong>all, screen<\/strong> and <strong>print <\/strong>(there is also a &#8220;speech&#8221; type for screenreaders that read out the page contents).<\/p>\n<p>Only the <strong>max-width<\/strong> media feature is required (other features include min-width and orientation).<\/p>\n<p>Note: only the media query declaration itself is included in the Advanced Higher course.<\/p>\n<h1>Examples<\/h1>\n<h2>Navigation Bars<\/h2>\n<p>A <strong><a href=\"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/html\/horizontal-navigation-bars\/\">horizontal navigation bar<\/a><\/strong> uses the <strong>float<\/strong> and <strong>width<\/strong> properties to display <strong>li<\/strong> elements alongside each other, suitable for a wide screen display.<\/p>\n<pre class=\"brush: css; title: CSS Horizontal Navigation Bar; notranslate\" title=\"CSS Horizontal Navigation Bar\">\r\nnav ul {\r\n        list-style-type:none;\r\n}\r\n \r\nnav ul li {\r\n        float:left;\r\n        width:80px;\r\n        text-align:center;\r\n}\r\n \r\n \r\nnav ul li a {\r\n    display:block;\r\n    padding:8px;\r\n    background-color:wheat;\r\n    border: 1px solid black;\r\n    text-decoration:none; \r\n}\r\n \r\nnav ul li a:hover {\r\n    background-color:#000;\r\n    color:white;\r\n}\r\n<\/pre>\n<p>For screen displays under 600 pixels wide, the height of the <strong>nav<\/strong> container is increased, and each navigation <strong>li<\/strong> is increased to the full width of the display so they appear underneath each other:<\/p>\n<pre class=\"brush: css; title: CSS; notranslate\" title=\"CSS\">\r\n@media screen and (maxwidth:600px) {\r\n    nav {\r\n        height: 125px;\r\n    }\r\n    nav ul li {\r\n        width:100%;\r\n        height:20px;\r\n        font-size:8pt}\r\n    }\r\n<\/pre>\n<h2>Printing<\/h2>\n<p>Light coloured text on a dark background may work well on a display, but not so well on paper.<\/p>\n<p>Items suitable for displaying on screen may not be needed for printing &#8211; eg when printing a receipt.<\/p>\n<pre>@media print { \n    * { \n        color: black;\n        background-colour: white; \n    }\n\n    .screenonly {\n        display: none;\n    }\n[\/css]<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The display of responsive pages will change depending on the device or window on which they are to be viewed. Common uses for responsive pages is for: printing on paper\/PDF (hiding unnecessary page elements, using black on white text) screens with narrower displays (tablets\/smartphones) (replacing a horizonal navigation bar with a vertical, or hamburger menu) Within the CSS, default values are written first, with media queries defined underneath. When coding<\/p>\n<p><a class=\"more-link\" href=\"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/css\/media-queries\/\">Read More<\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"parent":78,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-321","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/321","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/comments?post=321"}],"version-history":[{"count":6,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/321\/revisions"}],"predecessor-version":[{"id":376,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/321\/revisions\/376"}],"up":[{"embeddable":true,"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/pages\/78"}],"wp:attachment":[{"href":"https:\/\/blogs.glowscotland.org.uk\/sh\/ahscomputinghtml\/wp-json\/wp\/v2\/media?parent=321"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}