{"id":136941,"date":"2024-10-10T16:59:39","date_gmt":"2024-10-10T11:29:39","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=136941"},"modified":"2024-10-16T12:35:26","modified_gmt":"2024-10-16T07:05:26","slug":"media-queries-media-queries-and-container-queries","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-media-queries-and-container-queries\/","title":{"rendered":"Media Queries | Media Queries and Container Queries"},"content":{"rendered":"\n<p><strong>Understanding Media Queries<\/strong><\/p>\n\n\n\n<p>Media queries are a powerful tool in CSS that allows 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>Using Media Queries<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\" start=\"1\">\n<li><strong>Create a media query block:<\/strong> Enclose your styles within a media query block using curly braces.<\/li>\n\n\n\n<li><strong>Specify the conditions:<\/strong> Inside the block, define the conditions under which the styles should be applied.<\/li>\n\n\n\n<li><strong>Apply styles:<\/strong> Add the CSS rules you want to apply when the conditions are met.<\/li>\n<\/ol>\n\n\n\n<p><strong>Tips for Using Media Queries<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Start with a mobile-first approach:<\/strong> Design for smaller screens first and progressively enhance for larger screens.<\/li>\n\n\n\n<li><strong>Use logical units:<\/strong> Consider using em or rem for font sizes and spacing to create more flexible layouts.<\/li>\n\n\n\n<li><strong>Test thoroughly:<\/strong> Test your website on various devices and screen sizes to ensure that the media queries are working as expected.<\/li>\n\n\n\n<li><strong>Avoid excessive media queries:<\/strong> Excessive media queries can slow down your website&#8217;s performance.<\/li>\n<\/ul>\n\n\n\n<p>Media queries are a fundamental tool for creating responsive web designs. By understanding how to use them effectively, you can create websites that adapt seamlessly to different screen sizes and provide a great user experience across all devices.<\/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\/consolidate-media-queries-or-scatter-them-where-it-suits-media-queries-and-container-queries\/\" 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\/container-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>Understanding Media Queries Media queries are a powerful tool in CSS that allows 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&#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-136941","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 | Media Queries and Container Queries - Tutorial<\/title>\n<meta name=\"description\" content=\"Pass the Certified Responsive Web Design exam by preparing with latest study guide. 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-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 | Media Queries and Container Queries - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Pass the Certified Responsive Web Design exam by preparing with latest study guide. Get Certified Now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-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-16T07:05:26+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-media-queries-and-container-queries\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-media-queries-and-container-queries\/\",\"name\":\"Media Queries | Media Queries and Container Queries - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2024-10-10T11:29:39+00:00\",\"dateModified\":\"2024-10-16T07:05:26+00:00\",\"description\":\"Pass the Certified Responsive Web Design exam by preparing with latest study guide. Get Certified Now!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-media-queries-and-container-queries\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-media-queries-and-container-queries\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-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 | 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 | Media Queries and Container Queries - Tutorial","description":"Pass the Certified Responsive Web Design exam by preparing with latest study guide. 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-media-queries-and-container-queries\/","og_locale":"en_US","og_type":"article","og_title":"Media Queries | Media Queries and Container Queries - Tutorial","og_description":"Pass the Certified Responsive Web Design exam by preparing with latest study guide. Get Certified Now!","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-media-queries-and-container-queries\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-10-16T07:05:26+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-media-queries-and-container-queries\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-media-queries-and-container-queries\/","name":"Media Queries | Media Queries and Container Queries - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2024-10-10T11:29:39+00:00","dateModified":"2024-10-16T07:05:26+00:00","description":"Pass the Certified Responsive Web Design exam by preparing with latest study guide. Get Certified Now!","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-media-queries-and-container-queries\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-media-queries-and-container-queries\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/media-queries-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 | 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\/136941","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=136941"}],"version-history":[{"count":3,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/136941\/revisions"}],"predecessor-version":[{"id":137326,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/136941\/revisions\/137326"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=136941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=136941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=136941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}