{"id":136927,"date":"2024-10-10T16:43:26","date_gmt":"2024-10-10T11:13:26","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?page_id=136927"},"modified":"2024-10-16T12:22:10","modified_gmt":"2024-10-16T06:52:10","slug":"the-meta-tag-and-media-queries-media-queries-and-container-queries","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/the-meta-tag-and-media-queries-media-queries-and-container-queries\/","title":{"rendered":"The meta tag and Media Queries | Media Queries and Container Queries"},"content":{"rendered":"\n<p>Meta tags provide metadata about a web page, such as the title, description, keywords, and viewport settings. While they don&#8217;t directly affect the layout of a responsive website, they play a crucial role in SEO and user experience.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>viewport meta tag:<\/strong> This meta tag specifies the viewport dimensions and scaling behavior, ensuring the website displays correctly on different devices.<\/li>\n<\/ul>\n\n\n\n<p>&lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1.0&#8243;&gt;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Other meta tags:<\/strong><ul><li><strong>title:<\/strong> Sets the title of the page, which appears in the browser tab and search engine results.<\/li><\/ul><ul><li><strong>description:<\/strong> Provides a brief summary of the page&#8217;s content, often used by search engines in search results.<\/li><\/ul>\n<ul class=\"wp-block-list\">\n<li><strong>keywords:<\/strong> Specifies keywords related to the page&#8217;s content, although their effectiveness in SEO has diminished in recent years.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><strong>Media Queries<\/strong><\/p>\n\n\n\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>Using Media Queries with Meta Tags<\/strong><\/p>\n\n\n\n<p>While media queries and meta tags are separate concepts, they can work together to create a more responsive and optimized website. For example, you can use a media query to adjust the viewport settings based on the screen size:<\/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; meta[name=&#8221;viewport&#8221;] {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp; content: &#8220;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no&#8221;;<\/p>\n\n\n\n<p>&nbsp; }<\/p>\n\n\n\n<p>} By combining meta tags and media queries, you can create responsive websites that provide a great user experience across all devices and improve your website&#8217;s search engine ranking.<\/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\/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\/testing-responsive-designs-on-emulators-and-simulators-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>Meta tags provide metadata about a web page, such as the title, description, keywords, and viewport settings. While they don&#8217;t directly affect the layout of a responsive website, they play a crucial role in SEO and user experience. &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width, initial-scale=1.0&#8243;&gt; Media Queries Media queries are a powerful tool in CSS that allow you&#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-136927","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>The meta tag and Media Queries | Media Queries and Container Queries - Tutorial<\/title>\n<meta name=\"description\" content=\"Get ahead in your career by passing 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\/the-meta-tag-and-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=\"The meta tag and Media Queries | Media Queries and Container Queries - Tutorial\" \/>\n<meta property=\"og:description\" content=\"Get ahead in your career by passing the Certified Responsive Web Design exam. Get Certified Now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/the-meta-tag-and-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-16T06:52:10+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\/the-meta-tag-and-media-queries-media-queries-and-container-queries\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/the-meta-tag-and-media-queries-media-queries-and-container-queries\/\",\"name\":\"The meta tag and Media Queries | Media Queries and Container Queries - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2024-10-10T11:13:26+00:00\",\"dateModified\":\"2024-10-16T06:52:10+00:00\",\"description\":\"Get ahead in your career by passing the Certified Responsive Web Design exam. Get Certified Now!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/the-meta-tag-and-media-queries-media-queries-and-container-queries\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/the-meta-tag-and-media-queries-media-queries-and-container-queries\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/the-meta-tag-and-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\":\"The meta tag and 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":"The meta tag and Media Queries | Media Queries and Container Queries - Tutorial","description":"Get ahead in your career by passing 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\/the-meta-tag-and-media-queries-media-queries-and-container-queries\/","og_locale":"en_US","og_type":"article","og_title":"The meta tag and Media Queries | Media Queries and Container Queries - Tutorial","og_description":"Get ahead in your career by passing the Certified Responsive Web Design exam. Get Certified Now!","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/the-meta-tag-and-media-queries-media-queries-and-container-queries\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-10-16T06:52:10+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/the-meta-tag-and-media-queries-media-queries-and-container-queries\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/the-meta-tag-and-media-queries-media-queries-and-container-queries\/","name":"The meta tag and Media Queries | Media Queries and Container Queries - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2024-10-10T11:13:26+00:00","dateModified":"2024-10-16T06:52:10+00:00","description":"Get ahead in your career by passing the Certified Responsive Web Design exam. Get Certified Now!","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/the-meta-tag-and-media-queries-media-queries-and-container-queries\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/the-meta-tag-and-media-queries-media-queries-and-container-queries\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/the-meta-tag-and-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":"The meta tag and 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\/136927","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=136927"}],"version-history":[{"count":3,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/136927\/revisions"}],"predecessor-version":[{"id":137321,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/136927\/revisions\/137321"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=136927"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=136927"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=136927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}