{"id":136922,"date":"2024-10-10T16:36:29","date_gmt":"2024-10-10T11:06:29","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=136922"},"modified":"2024-10-16T12:21:14","modified_gmt":"2024-10-16T06:51:14","slug":"media-queries-and-container-queries","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-and-container-queries\/","title":{"rendered":"Media Queries and Container Queries"},"content":{"rendered":"\n<p>Media queries are a powerful tool in CSS that allow you to apply different styles based on specific conditions, such as screen size, orientation, resolution, and more. They are essential for creating responsive web designs that adapt to various devices and screen sizes.<\/p>\n\n\n\n<p><strong>Basic Structure of a Media Query<\/strong><\/p>\n\n\n\n<p>A media query consists of two main parts:<\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"1\">\n<li><strong>Media type:<\/strong> Specifies the type of media the query targets (e.g., screen, print).<\/li>\n\n\n\n<li><strong>Conditions:<\/strong> Defines the conditions under which the styles should be applied.<\/li>\n<\/ol>\n\n\n\n<p><strong>Common Conditions<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>width and <\/strong><strong>height:<\/strong> Specify the viewport width and height.<\/li>\n\n\n\n<li><strong>min-width and <\/strong><strong>max-width:<\/strong> Set minimum and maximum width values.<\/li>\n\n\n\n<li><strong>min-height and <\/strong><strong>max-height:<\/strong> Set minimum and maximum height values.<\/li>\n\n\n\n<li><strong>orientation:<\/strong> Specify the orientation of the device (portrait or landscape).<\/li>\n\n\n\n<li><strong>resolution:<\/strong> Specify the screen resolution.<\/li>\n<\/ul>\n\n\n\n<p><strong>Example:<\/strong><\/p>\n\n\n\n<p>@media only screen and (max-width: 600px) {<\/p>\n\n\n\n<p>&nbsp; \/* Styles for screens narrower than 600px *\/<\/p>\n\n\n\n<p>&nbsp; .header {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; text-align: center;<\/p>\n\n\n\n<p>&nbsp; }<\/p>\n\n\n\n<p>&nbsp; .nav {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; display: none;<\/p>\n\n\n\n<p>&nbsp; }<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><strong>Container Queries<\/strong><\/p>\n\n\n\n<p>Container queries are a proposed CSS feature that would allow you to apply styles based on the width or height of a specific container element, rather than the viewport. This can be useful for creating more responsive and adaptable layouts.<\/p>\n\n\n\n<p><strong>Note:<\/strong> Container queries are not yet fully supported by all browsers, but there are polyfills and experimental features available to use them today.<\/p>\n\n\n\n<p><strong>Example (using a polyfill):<\/strong><\/p>\n\n\n\n<p>.container {<\/p>\n\n\n\n<p>&nbsp; container-type: inline-size; \/* Set the container type to inline-size *\/<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>@container (min-width: 600px) {<\/p>\n\n\n\n<p>&nbsp; .container {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; \/* Styles for containers wider than 600px *\/<\/p>\n\n\n\n<p>&nbsp; }<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><strong>Using Media Queries and Container Queries Together<\/strong><\/p>\n\n\n\n<p>You can combine media queries and container queries to create even more flexible and responsive layouts. For example, you could use a media query to target different screen sizes, and then use container queries to adjust the layout within specific containers based on their width.<\/p>\n\n\n\n<p>By effectively using media queries and container queries, you can create responsive web designs that adapt seamlessly to various devices and screen sizes, providing a great user experience for all users.<\/p>\n\n\n\n<div class=\"wp-block-buttons alignwide is-content-justification-space-between is-layout-flex wp-container-core-buttons-is-layout-3d213aab wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/the-element-writing-html-markup\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>&lt;&lt;Prev<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/certificate-in-responsive-web-design\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Back To The Tutorial<\/strong><\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><a class=\"wp-block-button__link has-content-heading-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/the-meta-tag-and-media-queries-media-queries-and-container-queries\/\" style=\"background-color:#ffffff\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Next&gt;&gt;<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Media queries are a powerful tool in CSS that allow you to apply different styles based on specific conditions, such as screen size, orientation, resolution, and more. They are essential for creating responsive web designs that adapt to various devices and screen sizes. Basic Structure of a Media Query A media query consists of two&#8230;<\/p>\n","protected":false},"author":15,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-136922","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Media Queries and Container Queries - Tutorial<\/title>\n<meta name=\"description\" content=\"Get a step closer to preparing for the Certified Responsive Web Design Exam. Get Certified Now!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-and-container-queries\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Media Queries and Container Queries - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Get a step closer to preparing for the Certified Responsive Web Design Exam. Get Certified Now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-and-container-queries\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-16T06:51:14+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-and-container-queries\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-and-container-queries\/\",\"name\":\"Media Queries and Container Queries - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2024-10-10T11:06:29+00:00\",\"dateModified\":\"2024-10-16T06:51:14+00:00\",\"description\":\"Get a step closer to preparing for the Certified Responsive Web Design Exam. Get Certified Now!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-and-container-queries\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-and-container-queries\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-and-container-queries\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Media Queries and Container Queries\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Media Queries and Container Queries - Tutorial","description":"Get a step closer to preparing for the Certified Responsive Web Design Exam. Get Certified Now!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-and-container-queries\/","og_locale":"en_US","og_type":"article","og_title":"Media Queries and Container Queries - Tutorial","og_description":"Get a step closer to preparing for the Certified Responsive Web Design Exam. Get Certified Now!","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-and-container-queries\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-10-16T06:51:14+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-and-container-queries\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-and-container-queries\/","name":"Media Queries and Container Queries - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2024-10-10T11:06:29+00:00","dateModified":"2024-10-16T06:51:14+00:00","description":"Get a step closer to preparing for the Certified Responsive Web Design Exam. Get Certified Now!","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-and-container-queries\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-and-container-queries\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-and-container-queries\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Media Queries and Container Queries"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/136922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=136922"}],"version-history":[{"count":3,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/136922\/revisions"}],"predecessor-version":[{"id":137320,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/136922\/revisions\/137320"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=136922"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=136922"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=136922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}