{"id":17988,"date":"2020-09-01T07:38:50","date_gmt":"2020-09-01T07:38:50","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=17988"},"modified":"2020-09-01T07:40:51","modified_gmt":"2020-09-01T07:40:51","slug":"how-to-add-media-query-in-your-html-websites","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/how-to-add-media-query-in-your-html-websites\/","title":{"rendered":"How to add Media Query in your HTML Websites?"},"content":{"rendered":"\n<p><strong>Media Query<\/strong>:<\/p>\n\n\n\n<p>A <strong>media query <\/strong>is a <strong>CSS <\/strong>technique introduced in <strong>CSS<\/strong>. A media query consists of the optional media type and zero or more expressions that limit the style sheet&#8217;s scope by using media features, such as width, height, and color.<\/p>\n\n\n\n<p><strong>Syntax:<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-keyword\">@media<\/span> <span class=\"hljs-keyword\">not<\/span> <span class=\"hljs-keyword\">only<\/span> mediatype <span class=\"hljs-keyword\">and<\/span> (expressions \/ media features) { <span class=\"hljs-selector-tag\">CSS<\/span>; }<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-keyword\">@media<\/span> screen <span class=\"hljs-keyword\">and<\/span> (<span class=\"hljs-attribute\">min-width:<\/span><span class=\"hljs-number\">480px<\/span>){\n<span class=\"hljs-selector-tag\">body<\/span>{\n<span class=\"hljs-attribute\">background-color<\/span>: lightgreen;}\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Use can also use these methods:<\/p>\n\n\n\n<p><strong>all<\/strong> &#8211; Used all media type devices<br><strong>print <\/strong>&#8211; Used for printers<br><strong>screen <\/strong>&#8211; Used for computer screen, tablets, smart-phones, etc.<br><strong>speech <\/strong>&#8211; Used for screenreaders that &#8220;reads&#8221; the page out loud<\/p>\n\n\n\n<p>If you use the <strong>not only operators<\/strong>, you must an explicit media type.<\/p>\n\n\n\n<p>By using <strong>Logical Operators<\/strong>:<\/p>\n\n\n\n<p><strong>And<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>@media (min-width: 800px){ CSS }<\/li><li>@media (min-width: 800px) and (orientation: landscape) { CSS }<\/li><li>@media screen and (min-width: 800px) and (orientation: landscape) { CSS }<\/li><\/ul>\n\n\n\n<p><strong>OR (Comma ,):<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>@media (min-width: 800px), (orientation: landscape) { CSS }<\/li><\/ul>\n\n\n\n<p><strong>Not:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>@media not all and (min-width: 800px) { CSS }<\/li><li>@media not (all and (min-width: 800px)) { CSS }<\/li><li>@media not screen and (color), print and (color) { CSS }<\/li><li>@media (not (screen and (color))), print and (color) { CSS }<\/li><\/ul>\n\n\n\n<p>Here is the example code, you can create a <strong>html file<\/strong>:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/25b53b97de35613718e483d8afceab23.js\"><\/script>\n\n\n\n<p>When using this CSS Code:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\">    <span class=\"hljs-selector-tag\">body<\/span> { <span class=\"hljs-attribute\">background-color<\/span>: pink;}\n    <span class=\"hljs-keyword\">@media<\/span> screen <span class=\"hljs-keyword\">and<\/span> (<span class=\"hljs-attribute\">min-width:<\/span> <span class=\"hljs-number\">600px<\/span>)\n    { <span class=\"hljs-selector-tag\">body<\/span> { <span class=\"hljs-attribute\">background-color<\/span>: red; } }\n\n    <span class=\"hljs-keyword\">@media<\/span> screen <span class=\"hljs-keyword\">and<\/span> (<span class=\"hljs-attribute\">min-width:<\/span> <span class=\"hljs-number\">768px<\/span>)\n    { <span class=\"hljs-selector-tag\">body<\/span> { <span class=\"hljs-attribute\">background-color<\/span>: blue; } }\n\n    <span class=\"hljs-keyword\">@media<\/span> screen <span class=\"hljs-keyword\">and<\/span> (<span class=\"hljs-attribute\">min-width:<\/span> <span class=\"hljs-number\">992px<\/span>)\n    { <span class=\"hljs-selector-tag\">body<\/span> { <span class=\"hljs-attribute\">background-color<\/span>: orange; } }<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Then, See the Result:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/media2-1.png\" alt=\"\" class=\"wp-image-17991\" width=\"499\" height=\"302\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/media2-1.png 643w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/media2-1-300x182.png 300w\" sizes=\"auto, (max-width: 499px) 100vw, 499px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/media5.png\" alt=\"\" class=\"wp-image-17992\" width=\"493\" height=\"227\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/media5.png 803w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/media5-300x138.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/media5-768x354.png 768w\" sizes=\"auto, (max-width: 493px) 100vw, 493px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/media6.png\" alt=\"\" class=\"wp-image-17993\" width=\"501\" height=\"190\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/media6.png 1004w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/media6-300x114.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/media6-768x291.png 768w\" sizes=\"auto, (max-width: 501px) 100vw, 501px\" \/><\/figure>\n\n\n\n<p>Then, using this CSS:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\">    <span class=\"hljs-selector-tag\">div<\/span> {\n      <span class=\"hljs-attribute\">width<\/span>: auto;\n      <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">300px<\/span>;\n      <span class=\"hljs-attribute\">background-color<\/span>: pink;\n    }\n\n    <span class=\"hljs-selector-tag\">p<\/span> {\n      <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">15px<\/span>;\n    }\n\n    <span class=\"hljs-keyword\">@media<\/span> screen <span class=\"hljs-keyword\">and<\/span> (<span class=\"hljs-attribute\">min-width:<\/span> <span class=\"hljs-number\">600px<\/span>) {\n      <span class=\"hljs-selector-tag\">p<\/span> { <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">24px<\/span>; <span class=\"hljs-attribute\">font-weight<\/span>: bold; }\n    }<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>See the result:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/media3.png\" alt=\"\" class=\"wp-image-17994\" width=\"513\" height=\"243\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/media3.png 801w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/media3-300x143.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/media3-768x365.png 768w\" sizes=\"auto, (max-width: 513px) 100vw, 513px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/media4.png\" alt=\"\" class=\"wp-image-17995\" width=\"515\" height=\"350\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/media4.png 567w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/09\/media4-300x204.png 300w\" sizes=\"auto, (max-width: 515px) 100vw, 515px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Media Query: A media query is a CSS technique introduced in CSS. A media query consists of the optional media type and zero or more expressions that limit the style sheet&#8217;s scope by using media features, such as width, height, and color. Syntax: Example: Use can also use these methods: all &#8211; Used all media&#8230;<\/p>\n","protected":false},"author":9,"featured_media":17996,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_joinchat":[],"footnotes":""},"categories":[4864,5605],"tags":[5358,4459,6376],"class_list":["post-17988","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","category-css","tag-css","tag-html","tag-media-query"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17988","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=17988"}],"version-history":[{"count":4,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17988\/revisions"}],"predecessor-version":[{"id":18000,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17988\/revisions\/18000"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media\/17996"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=17988"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=17988"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=17988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}