{"id":46620,"date":"2024-07-05T10:23:30","date_gmt":"2024-07-05T08:23:30","guid":{"rendered":"https:\/\/www.inovex.de\/?p=46620"},"modified":"2024-07-05T10:23:30","modified_gmt":"2024-07-05T08:23:30","slug":"css-media-queries-vs-container-queries","status":"publish","type":"post","link":"https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/","title":{"rendered":"CSS Media Queries vs. Container Queries"},"content":{"rendered":"<p>Today&#8217;s web is built around components and that&#8217;s where media queries are lacking behind. We are going to see why in this article. But first, let&#8217;s cover the basics and start with a recap of media queries and the newer feature called container queries. Later we&#8217;ll jump into the benefits of container queries and when to use them or stick to the good old media queries.<!--more--><\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\"><\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/#Recap-%E2%80%93-What-are-Media-Queries\" >Recap \u2013 What are Media Queries<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/#Example\" >Example<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/#What-are-Container-Queries\" >What are Container Queries<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/#Example-2\" >Example<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/#Container-Types\" >Container Types<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/#Container-Name\" >Container Name<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/#Container-Query-Units\" >Container Query Units<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/#Media-Queries-vs-Container-Queries\" >Media Queries vs. Container Queries<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/#Key-takeaways\" >Key takeaways<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Recap-%E2%80%93-What-are-Media-Queries\"><\/span>Recap \u2013 What are Media Queries<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Media queries are a CSS specification introduced with CSS3. The main idea behind media queries is to apply styles to an element based on the user agent or device the element is displayed. Common possible query values include but not limited to are: <strong>device type<\/strong>, <strong>orientation,<\/strong> and <strong>viewport <\/strong><a href=\"https:\/\/www.w3.org\/TR\/mediaqueries-5\/#media\">[1]<\/a>.<\/p>\n<pre class=\"\">@media screen and (min-width: 576px) and (orientation: landscape) {\r\n  \/* \u2026 *\/\r\n}\r\n<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Example\"><\/span>Example<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Let&#8217;s say we have three divs of different sizes and we want to change their color for each of our three breakpoints (small: 576px, medium: 640px, large: 768px). The following code would do the trick.<\/p>\n<div class=\"BorlabsCookie\">\n<div class=\"_brlbs-content-blocker\">\n<div class=\"_brlbs-default\">\n<p>Klicken Sie auf den unteren Button, um den Inhalt von codepen.io zu laden.<\/p>\n<p><a class=\"_brlbs-btn\" href=\"#\" data-borlabs-cookie-unblock role=\"button\">Inhalt laden<\/a><\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"borlabs-hide\" data-borlabs-cookie-type=\"content-blocker\" data-borlabs-cookie-id=\"default\">PGlmcmFtZSBjbGFzcz0id3AtZW1iZWRkZWQtY29udGVudCIgc2FuZGJveD0iYWxsb3ctc2NyaXB0cyIgc2VjdXJpdHk9InJlc3RyaWN0ZWQiIHRpdGxlPSJNZWRpYSBRdWVyaWVzIiBzcmM9Imh0dHBzOi8vY29kZXBlbi5pby9rYWJvdWVsaGFzc2FuL2VtYmVkL3ByZXZpZXcvellNekdwWj9kZWZhdWx0LXRhYnM9Y3NzJTJDcmVzdWx0JiMwMzg7aGVpZ2h0PTMwMCYjMDM4O2hvc3Q9aHR0cHMlM0ElMkYlMkZjb2RlcGVuLmlvJiMwMzg7c2x1Zy1oYXNoPXpZTXpHcFojP3NlY3JldD1mZ1c1QTZuMk42IiBkYXRhLXNlY3JldD0iZmdXNUE2bjJONiIgc2Nyb2xsaW5nPSJubyIgZnJhbWVib3JkZXI9IjAiIGhlaWdodD0iMzAwIj48L2lmcmFtZT4=<\/div>\n<\/div>\n<p>*resize the browser window<\/p>\n<h2><span class=\"ez-toc-section\" id=\"What-are-Container-Queries\"><\/span>What are Container Queries<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Container queries is a CSS specification introduced in late 2022. The main idea behind container queries is to apply styles to an element based on the size of the element&#8217;s container rather than the size of the viewport. You can listen to the properties and features of a container element. You can query the width but also custom properties <a href=\"https:\/\/www.w3.org\/TR\/css-contain-3\/\">[2]<\/a>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Example-2\"><\/span>Example<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If we continue our example from the media queries recap section the only thing we need to change to turn the media query into a container query is to exchange <strong>@media<\/strong> with <strong>@container <\/strong>and add the line <strong>container-type: inline-size<\/strong> to the container class. The code now looks as follows:<\/p>\n<div class=\"BorlabsCookie\">\n<div class=\"_brlbs-content-blocker\">\n<div class=\"_brlbs-default\">\n<p>Klicken Sie auf den unteren Button, um den Inhalt von codepen.io zu laden.<\/p>\n<p><a class=\"_brlbs-btn\" href=\"#\" data-borlabs-cookie-unblock role=\"button\">Inhalt laden<\/a><\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"borlabs-hide\" data-borlabs-cookie-type=\"content-blocker\" data-borlabs-cookie-id=\"default\">PGlmcmFtZSBjbGFzcz0id3AtZW1iZWRkZWQtY29udGVudCIgc2FuZGJveD0iYWxsb3ctc2NyaXB0cyIgc2VjdXJpdHk9InJlc3RyaWN0ZWQiIHRpdGxlPSJDb250YWluZXIgUXVlcmllcyIgc3JjPSJodHRwczovL2NvZGVwZW4uaW8va2Fib3VlbGhhc3Nhbi9lbWJlZC9wcmV2aWV3L01Xem93Vnk\/ZGVmYXVsdC10YWJzPWNzcyUyQ3Jlc3VsdCYjMDM4O2hlaWdodD0zMDAmIzAzODtob3N0PWh0dHBzJTNBJTJGJTJGY29kZXBlbi5pbyYjMDM4O3NsdWctaGFzaD1NV3pvd1Z5Iz9zZWNyZXQ9VlBXUjB2eHAzdiIgZGF0YS1zZWNyZXQ9IlZQV1IwdnhwM3YiIHNjcm9sbGluZz0ibm8iIGZyYW1lYm9yZGVyPSIwIiBoZWlnaHQ9IjMwMCI+PC9pZnJhbWU+<\/div>\n<\/div>\n<p>*in the bottom right corner you can resize the div<\/p>\n<p>As already mentioned container queries are based on the width of the element they are applied on rather than the viewport, so what happens is that all three divs now change their background color independently (according to their own width) even though we apply the same queries to all of them.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Container-Types\"><\/span>Container Types<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>As already mentioned, there are 2 different container types.<\/p>\n<p><strong>inline-size<\/strong> sets the size limit only on the inline axis. This means that the <strong>width<\/strong> or <strong>inline-size<\/strong> can be queried.<br \/>\nAs a block-size option could not be implemented by the browsers, it does not exist. The alternative is the size option.<\/p>\n<p>With the <strong>size<\/strong> option, the size restriction is defined on both dimensions. This means that the <strong>height<\/strong>, <strong>orientation,<\/strong> or <strong>aspect-ratio<\/strong>\u00a0can also be queried.<\/p>\n<p><em>However, it should be noted that side effects can occur with the size option. So be careful using this option.<\/em><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Container-Name\"><\/span>Container Name<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If you have several nested containers or simply want to ensure that your query uses the desired container, a container can be given a name to query it specifically.<\/p>\n<pre class=\"lang:css decode:true \">.page {\r\n  container-type: inline-size;\r\n  container-name: page;\r\n\r\n  width: 50%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 10px;\r\n}\r\n\r\nmain {\r\n  container-type: inline-size;\r\n  container-name: main;\r\n\r\n  display: grid;\r\n  gap: 10px;\r\n}\r\n\r\naside,\r\nsection,\r\nfooter {\r\n  padding: 20px;\r\n}\r\n\r\naside,\r\nfooter {\r\n  color: white;\r\n  background-color: black;\r\n}\r\n\r\nsection {\r\n  background-color: grey;\r\n  height: 150px;\r\n}\r\n\r\naside {\r\n  display: flex;\r\n  justify-content: space-evenly;\r\n}\r\n\r\n\/* The query watches the width of the 'page' container *\/\r\n@container page (min-width: 450px) {\r\n  main {\r\n    grid-template-columns: auto 1fr;\r\n  }\r\n  \r\n  aside {\r\n    flex-direction: column;\r\n    align-items: center;\r\n  }\r\n}\r\n\r\n\/* The query watches the width of the 'main' container (aside + content) *\/\r\n@container main (min-width: 450px) {\r\n   aside {\r\n    background-color: orange;\r\n  }\r\n}\r\n<\/pre>\n<p>When a container query is added, the nearest ancestor container is searched for by default. By adding a name, a specific container can be targeted.<\/p>\n<p>It&#8217;s also possible to use a short version to describe the type and the name of a container.<\/p>\n<pre class=\"lang:default decode:true\">main {  \r\n  container: main; \/ inline-size; \/\/ container-name: main; container-type: inline-size\r\n  container: main; \/\/ container-name: main; container-type: normal;\r\n}\r\n\r\n\r\n<\/pre>\n<h3><span class=\"ez-toc-section\" id=\"Container-Query-Units\"><\/span>Container Query Units<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Container Queries come with their own units that work like the already-known new viewport units introduced in 2022:\u00a0 75svw = 75cqw [<a href=\"https:\/\/www.w3.org\/TR\/css-values-4\/#viewport-relative-units\">3<\/a>][<a href=\"https:\/\/www.w3.org\/TR\/css-contain-3\/#container-lengths\">4<\/a>]<br \/>\nExample:<\/p>\n<div class=\"BorlabsCookie\">\n<div class=\"_brlbs-content-blocker\">\n<div class=\"_brlbs-default\">\n<p>Klicken Sie auf den unteren Button, um den Inhalt von codepen.io zu laden.<\/p>\n<p><a class=\"_brlbs-btn\" href=\"#\" data-borlabs-cookie-unblock role=\"button\">Inhalt laden<\/a><\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"borlabs-hide\" data-borlabs-cookie-type=\"content-blocker\" data-borlabs-cookie-id=\"default\">PGlmcmFtZSBjbGFzcz0id3AtZW1iZWRkZWQtY29udGVudCIgc2FuZGJveD0iYWxsb3ctc2NyaXB0cyIgc2VjdXJpdHk9InJlc3RyaWN0ZWQiIHRpdGxlPSJzdncgdnMuIGNxdyIgc3JjPSJodHRwczovL2NvZGVwZW4uaW8vUGFzY2FsLURlY2tlci9lbWJlZC9wcmV2aWV3L1dOUEJPTXc\/ZGVmYXVsdC10YWJzPWNzcyUyQ3Jlc3VsdCYjMDM4O2hlaWdodD0zMDAmIzAzODtob3N0PWh0dHBzJTNBJTJGJTJGY29kZXBlbi5pbyYjMDM4O3NsdWctaGFzaD1XTlBCT013Iz9zZWNyZXQ9WXFMODAxRThibCIgZGF0YS1zZWNyZXQ9IllxTDgwMUU4YmwiIHNjcm9sbGluZz0ibm8iIGZyYW1lYm9yZGVyPSIwIiBoZWlnaHQ9IjMwMCI+PC9pZnJhbWU+<\/div>\n<\/div>\n<p>The key difference is, that the container query units are not relative to the viewport as long as they are inside a size container.<\/p>\n<p>Example:<\/p>\n<p>Overview about container query units:<\/p>\n<div class=\"responsive-table\">\n<table border=\"1\">\n<thead>\n<tr style=\"height: 21px;\">\n<td style=\"width: 50px; height: 21px; text-align: left;\">unit<\/td>\n<td style=\"width: 106.312px; height: 21px; text-align: left;\"><strong>explanation<\/strong><\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr style=\"height: 21px; vertical-align: top;\">\n<td style=\"width: 50px; height: 21px; text-align: left;\">1cqi<\/td>\n<td style=\"width: 106.312px; height: 21px; text-align: left;\">1% of a query container\u2019s inline size<\/td>\n<\/tr>\n<tr style=\"height: 21px; vertical-align: top;\">\n<td style=\"width: 25px; height: 21px; text-align: left;\">1cqb<\/td>\n<td style=\"width: 106.312px; height: 21px; text-align: left;\">1% of a query container\u2019s block size<\/td>\n<\/tr>\n<tr style=\"height: 21px; vertical-align: top;\">\n<td style=\"width: 25px; height: 21px; text-align: left;\">1cqh<\/td>\n<td style=\"width: 106.312px; height: 21px; text-align: left;\">1% of a query container\u2019s height<\/td>\n<\/tr>\n<tr style=\"height: 21px; vertical-align: top;\">\n<td style=\"width: 25px; height: 21px; text-align: left;\">1cqw<\/td>\n<td style=\"width: 106.312px; height: 21px; text-align: left;\">1% of a query container\u2019s width<\/td>\n<\/tr>\n<tr style=\"height: 21px; vertical-align: top;\">\n<td style=\"width: 25px; height: 21px; text-align: left;\">cqmin<\/td>\n<td style=\"width: 106.312px; height: 21px; text-align: left;\">The smaller value of cqi or cqb<\/td>\n<\/tr>\n<tr style=\"height: 21px; vertical-align: top;\">\n<td style=\"width: 25px; height: 21px; text-align: left;\">cqmax<\/td>\n<td style=\"width: 106.312px; height: 21px; text-align: left;\">The larger value of cqi or cqb<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"Media-Queries-vs-Container-Queries\"><\/span>Media Queries vs. Container Queries<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We have now gained an overview of how and when media queries and container queries can be used in simple examples. Now let&#8217;s look at one more example that is closer to the real world. So let&#8217;s jump right in.<\/p>\n<ul>\n<li>real world example with explanation (media vs container)<\/li>\n<\/ul>\n<div class=\"BorlabsCookie\">\n<div class=\"_brlbs-content-blocker\">\n<div class=\"_brlbs-default\">\n<p>Klicken Sie auf den unteren Button, um den Inhalt von codepen.io zu laden.<\/p>\n<p><a class=\"_brlbs-btn\" href=\"#\" data-borlabs-cookie-unblock role=\"button\">Inhalt laden<\/a><\/p>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"borlabs-hide\" data-borlabs-cookie-type=\"content-blocker\" data-borlabs-cookie-id=\"default\">PGlmcmFtZSBjbGFzcz0id3AtZW1iZWRkZWQtY29udGVudCIgc2FuZGJveD0iYWxsb3ctc2NyaXB0cyIgc2VjdXJpdHk9InJlc3RyaWN0ZWQiIHRpdGxlPSJDb250YWluZXIgUXVlcmllcyB3aXRoIFJlYWN0IiBzcmM9Imh0dHBzOi8vY29kZXBlbi5pby9rYWJvdWVsaGFzc2FuL2VtYmVkL3ByZXZpZXcvbWR2b2pSYj9kZWZhdWx0LXRhYnM9anMlMkNyZXN1bHQmIzAzODtoZWlnaHQ9MzAwJiMwMzg7aG9zdD1odHRwcyUzQSUyRiUyRmNvZGVwZW4uaW8mIzAzODtzbHVnLWhhc2g9bWR2b2pSYiM\/c2VjcmV0PUMzM0x5NGVGRmkiIGRhdGEtc2VjcmV0PSJDMzNMeTRlRkZpIiBzY3JvbGxpbmc9Im5vIiBmcmFtZWJvcmRlcj0iMCIgaGVpZ2h0PSIzMDAiPjwvaWZyYW1lPg==<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"Key-takeaways\"><\/span>Key takeaways<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"responsive-table\">\n<table border=\"1\">\n<thead>\n<tr style=\"height: 21px;\">\n<td style=\"width: 106.312px; height: 21px; text-align: center;\"><\/td>\n<td style=\"width: 106.312px; height: 21px; text-align: left;\"><strong>@media<\/strong><\/td>\n<td style=\"width: 132.688px; height: 21px; text-align: left;\" colspan=\"1\" rowspan=\"1\"><b>@container<\/b><\/td>\n<\/tr>\n<\/thead>\n<tbody>\n<tr style=\"height: 21px; vertical-align: top;\">\n<td style=\"width: 106.312px; height: 21px; text-align: left;\">size<\/td>\n<td style=\"width: 132.688px; height: 21px; text-align: left;\" colspan=\"1\" rowspan=\"1\">always refers to the width and height of the viewport<\/td>\n<td style=\"width: 132.688px; height: 21px; text-align: left;\">always refers to the width and height of the selected container\u2019s content box<\/td>\n<\/tr>\n<tr style=\"height: 21px; vertical-align: top;\">\n<td style=\"width: 106.312px; height: 21px; text-align: left;\">portability<\/td>\n<td style=\"width: 106.312px; height: 21px; text-align: left;\">most likely to break if you move the affected element to a different position<\/td>\n<td style=\"width: 132.688px; height: 21px; text-align: left;\">can be used at any position on the page<\/td>\n<\/tr>\n<tr style=\"height: 21px; vertical-align: top;\">\n<td style=\"width: 106.312px; height: 21px; text-align: left;\">use case<\/td>\n<td style=\"width: 106.312px; height: 21px; text-align: left;\">layout changes<\/td>\n<td style=\"width: 132.688px; height: 21px; text-align: left;\">component-based changes<\/td>\n<\/tr>\n<tr style=\"height: 21px; vertical-align: top;\">\n<td style=\"width: 106.312px; height: 21px; text-align: left;\">syntax<\/td>\n<td style=\"width: 106.312px; height: 21px; text-align: left;\">predefined syntax e.g.<br \/>\n@media (min-width: 480px) {}<\/td>\n<td style=\"width: 132.688px; height: 21px; text-align: left;\">same syntax available with increased feature set e.g. logical operators<br \/>\n@container (width &lt;= 480px) {}<\/td>\n<\/tr>\n<tr style=\"height: 21px; vertical-align: top;\">\n<td style=\"width: 106.312px; height: 21px; text-align: left;\">units<\/td>\n<td style=\"width: 106.312px; height: 21px; text-align: left;\">viewport units e.g. vh, vw<\/td>\n<td style=\"width: 132.688px; height: 21px; text-align: left;\">container units e.g. cqh, cqw<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today&#8217;s web is built around components and that&#8217;s where media queries are lacking behind. We are going to see why in this article. But first, let&#8217;s cover the basics and start with a recap of media queries and the newer feature called container queries. Later we&#8217;ll jump into the benefits of container queries and when [&hellip;]<\/p>\n","protected":false},"author":248,"featured_media":55509,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"ep_exclude_from_search":false,"footnotes":""},"tags":[130,339,131,70],"service":[444,445],"coauthors":[{"id":248,"display_name":"Kariem Abou-El-Hassan","user_nicename":"kabou-el-hassan"},{"id":382,"display_name":"Pascal Decker","user_nicename":"pdecker"}],"class_list":["post-46620","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-css","tag-state-of-the-web","tag-ui-ux","tag-web","service-frontend","service-ui-ux"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Media Queries vs. Container Queries - inovex GmbH<\/title>\n<meta name=\"description\" content=\"This article covers the basics of media queries, introduces the concept of container queries, and explains when to use each for optimal responsive design.\" \/>\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.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Media Queries vs. Container Queries - inovex GmbH\" \/>\n<meta property=\"og:description\" content=\"This article covers the basics of media queries, introduces the concept of container queries, and explains when to use each for optimal responsive design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/\" \/>\n<meta property=\"og:site_name\" content=\"inovex GmbH\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inovexde\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-05T08:23:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/media_query_vs_container_query.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Kariem Abou-El-Hassan, Pascal Decker\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/media_query_vs_container_query-1024x601.png\" \/>\n<meta name=\"twitter:creator\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:site\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kariem Abou-El-Hassan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\u00a0Minuten\" \/>\n\t<meta name=\"twitter:label3\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data3\" content=\"Kariem Abou-El-Hassan, Pascal Decker\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-media-queries-vs-container-queries\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-media-queries-vs-container-queries\\\/\"},\"author\":{\"name\":\"Kariem Abou-El-Hassan\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/f1a017f32e2288fd52cb1922e5529a97\"},\"headline\":\"CSS Media Queries vs. Container Queries\",\"datePublished\":\"2024-07-05T08:23:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-media-queries-vs-container-queries\\\/\"},\"wordCount\":789,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-media-queries-vs-container-queries\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/media_query_vs_container_query.png\",\"keywords\":[\"CSS\",\"State of the Web\",\"UI\\\/UX\",\"Web\"],\"articleSection\":[\"Applications\",\"General\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-media-queries-vs-container-queries\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-media-queries-vs-container-queries\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-media-queries-vs-container-queries\\\/\",\"name\":\"CSS Media Queries vs. Container Queries - inovex GmbH\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-media-queries-vs-container-queries\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-media-queries-vs-container-queries\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/media_query_vs_container_query.png\",\"datePublished\":\"2024-07-05T08:23:30+00:00\",\"description\":\"This article covers the basics of media queries, introduces the concept of container queries, and explains when to use each for optimal responsive design.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-media-queries-vs-container-queries\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-media-queries-vs-container-queries\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-media-queries-vs-container-queries\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/media_query_vs_container_query.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/media_query_vs_container_query.png\",\"width\":1500,\"height\":880,\"caption\":\"Grafik: Viewport Anzeige gegen\u00fcber von der Container Size Anzeige\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/css-media-queries-vs-container-queries\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Media Queries vs. Container Queries\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"name\":\"inovex GmbH\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\",\"name\":\"inovex GmbH\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"width\":1921,\"height\":1081,\"caption\":\"inovex GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/inovexde\",\"https:\\\/\\\/x.com\\\/inovexgmbh\",\"https:\\\/\\\/www.instagram.com\\\/inovexlife\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/inovex\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UC7r66GT14hROB_RQsQBAQUQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/f1a017f32e2288fd52cb1922e5529a97\",\"name\":\"Kariem Abou-El-Hassan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0fd6e6ea00922d1113f19a20ecf0a09d19025294565e8e5a74e99f810be40c48?s=96&d=retro&r=ge1771dc455a33cb18ff76701eeb1329c\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0fd6e6ea00922d1113f19a20ecf0a09d19025294565e8e5a74e99f810be40c48?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/0fd6e6ea00922d1113f19a20ecf0a09d19025294565e8e5a74e99f810be40c48?s=96&d=retro&r=g\",\"caption\":\"Kariem Abou-El-Hassan\"},\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/author\\\/kabou-el-hassan\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Media Queries vs. Container Queries - inovex GmbH","description":"This article covers the basics of media queries, introduces the concept of container queries, and explains when to use each for optimal responsive design.","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.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/","og_locale":"de_DE","og_type":"article","og_title":"CSS Media Queries vs. Container Queries - inovex GmbH","og_description":"This article covers the basics of media queries, introduces the concept of container queries, and explains when to use each for optimal responsive design.","og_url":"https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/","og_site_name":"inovex GmbH","article_publisher":"https:\/\/www.facebook.com\/inovexde","article_published_time":"2024-07-05T08:23:30+00:00","og_image":[{"width":1500,"height":880,"url":"https:\/\/www.inovex.de\/wp-content\/uploads\/media_query_vs_container_query.png","type":"image\/png"}],"author":"Kariem Abou-El-Hassan, Pascal Decker","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.inovex.de\/wp-content\/uploads\/media_query_vs_container_query-1024x601.png","twitter_creator":"@inovexgmbh","twitter_site":"@inovexgmbh","twitter_misc":{"Verfasst von":"Kariem Abou-El-Hassan","Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten","Written by":"Kariem Abou-El-Hassan, Pascal Decker"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/#article","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/"},"author":{"name":"Kariem Abou-El-Hassan","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/f1a017f32e2288fd52cb1922e5529a97"},"headline":"CSS Media Queries vs. Container Queries","datePublished":"2024-07-05T08:23:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/"},"wordCount":789,"commentCount":0,"publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/media_query_vs_container_query.png","keywords":["CSS","State of the Web","UI\/UX","Web"],"articleSection":["Applications","General"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/","url":"https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/","name":"CSS Media Queries vs. Container Queries - inovex GmbH","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/#primaryimage"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/media_query_vs_container_query.png","datePublished":"2024-07-05T08:23:30+00:00","description":"This article covers the basics of media queries, introduces the concept of container queries, and explains when to use each for optimal responsive design.","breadcrumb":{"@id":"https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/#primaryimage","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/media_query_vs_container_query.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/media_query_vs_container_query.png","width":1500,"height":880,"caption":"Grafik: Viewport Anzeige gegen\u00fcber von der Container Size Anzeige"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inovex.de\/de\/blog\/css-media-queries-vs-container-queries\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inovex.de\/de\/"},{"@type":"ListItem","position":2,"name":"CSS Media Queries vs. Container Queries"}]},{"@type":"WebSite","@id":"https:\/\/www.inovex.de\/de\/#website","url":"https:\/\/www.inovex.de\/de\/","name":"inovex GmbH","description":"","publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inovex.de\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.inovex.de\/de\/#organization","name":"inovex GmbH","url":"https:\/\/www.inovex.de\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","width":1921,"height":1081,"caption":"inovex GmbH"},"image":{"@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inovexde","https:\/\/x.com\/inovexgmbh","https:\/\/www.instagram.com\/inovexlife\/","https:\/\/www.linkedin.com\/company\/inovex","https:\/\/www.youtube.com\/channel\/UC7r66GT14hROB_RQsQBAQUQ"]},{"@type":"Person","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/f1a017f32e2288fd52cb1922e5529a97","name":"Kariem Abou-El-Hassan","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/0fd6e6ea00922d1113f19a20ecf0a09d19025294565e8e5a74e99f810be40c48?s=96&d=retro&r=ge1771dc455a33cb18ff76701eeb1329c","url":"https:\/\/secure.gravatar.com\/avatar\/0fd6e6ea00922d1113f19a20ecf0a09d19025294565e8e5a74e99f810be40c48?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0fd6e6ea00922d1113f19a20ecf0a09d19025294565e8e5a74e99f810be40c48?s=96&d=retro&r=g","caption":"Kariem Abou-El-Hassan"},"url":"https:\/\/www.inovex.de\/de\/blog\/author\/kabou-el-hassan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/46620","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/users\/248"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/comments?post=46620"}],"version-history":[{"count":7,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/46620\/revisions"}],"predecessor-version":[{"id":51471,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/46620\/revisions\/51471"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media\/55509"}],"wp:attachment":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media?parent=46620"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/tags?post=46620"},{"taxonomy":"service","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/service?post=46620"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/coauthors?post=46620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}