<\/div>
<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing:border-box; } .left { background-color:#2196F3; padding:20px; float:left; width:20%; \/* The width is 20%, by default *\/ } .main { background-color:#f1f1f1; padding:20px; float:left; width:60%; \/* The width is 60%, by default *\/ } .right { background-color:#4CAF50; padding:20px; float:left; width:20%; \/* The width is 20%, by default *\/ } \/* Use a media query to add a break point at 800px: *\/ @media screen and (max-width:800px) { .left , .main, .right {width:100%;} } <\/style> <\/head> <body> <h2>Media Queries<\/h2> <p>Resize the browser window, up and down around 800px wide.<\/p> <div class="left"> <p>Left<\/p> <\/div> <div class="main"> <p>Main Content<\/p> <\/div> <div class="right"> <p>Right<\/p> <\/div> <\/body><\/html><\/code><\/pre> <\/div>\nOutput<\/strong><\/p>\n![\"\"](\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/what-is-responsive-web-design-1.png\")
<\/p>\n","protected":false},"excerpt":{"rendered":"
RWD-Responsive Web Design. It is used to make your web page look good, appropriate and well placed on all devices like desktops, tablet, smartphones, etc. It uses HTML and CSS to hide, resize, enlarge, shrink or move the content. It makes the content look good on any screen. It is viewed on to provide an […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"passster_activate_protection":false,"passster_protect_child_pages":"","passster_protection_type":"password","passster_password":"","passster_activate_overwrite_defaults":"","passster_headline":"","passster_instruction":"","passster_placeholder":"","passster_button":"","passster_id":"","passster_activate_misc_settings":"","passster_redirect_url":"","passster_hide":"no","passster_area_shortcode":"","gtb_hide_title":false,"gtb_wrap_title":false,"gtb_class_title":"","gtb_remove_headerfooter":false,"footnotes":""},"categories":[17079],"tags":[17297,17292,17291,17298,17288,17293,17287,17299,17296,17295,17289,17294,17290],"class_list":["post-4333","post","type-post","status-publish","format-standard","hentry","category-web-designing","tag-components-of-responsive-web-design","tag-learn-web-development","tag-responsive-design","tag-responsive-design-example","tag-responsive-web-design","tag-responsive-web-design-rwd","tag-responsive-web-design-rwd-and-user-experience","tag-responsive-web-design-bootstrap","tag-responsive-web-design-examples","tag-responsive-web-design-examples-with-source-code","tag-responsive-web-design-introduction","tag-what-is-responsive-design","tag-what-is-responsive-web-design"],"yoast_head":"\n
What is Responsive Web Design (RWD) ? - Responsive Design -Wikitechy<\/title>\n<meta name=\"description\" content=\"What is Responsive Web Design (RWD) ? - It is used to make your web page look good, appropriate and well placed on all devices.\" \/>\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.wikitechy.com\/interview-questions\/web-designing\/what-is-responsive-web-design-rwd\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is Responsive Web Design (RWD) ? - Responsive Design -Wikitechy\" \/>\n<meta property=\"og:description\" content=\"What is Responsive Web Design (RWD) ? - It is used to make your web page look good, appropriate and well placed on all devices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-responsive-web-design-rwd\/\" \/>\n<meta property=\"og:site_name\" content=\"Wikitechy\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-11T09:20:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-11T09:22:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/what-is-responsive-web-design-1.png\" \/>\n<meta name=\"author\" content=\"webmaster\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"webmaster\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-responsive-web-design-rwd\/\",\"url\":\"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-responsive-web-design-rwd\/\",\"name\":\"What is Responsive Web Design (RWD) ? - Responsive Design -Wikitechy\",\"isPartOf\":{\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-responsive-web-design-rwd\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-responsive-web-design-rwd\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/what-is-responsive-web-design-1.png\",\"datePublished\":\"2022-05-11T09:20:20+00:00\",\"dateModified\":\"2022-05-11T09:22:04+00:00\",\"author\":{\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4\"},\"description\":\"What is Responsive Web Design (RWD) ? - It is used to make your web page look good, appropriate and well placed on all devices.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-responsive-web-design-rwd\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-responsive-web-design-rwd\/#primaryimage\",\"url\":\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/what-is-responsive-web-design-1.png\",\"contentUrl\":\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/what-is-responsive-web-design-1.png\",\"width\":2553,\"height\":764},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#website\",\"url\":\"https:\/\/www.wikitechy.com\/interview-questions\/\",\"name\":\"Wikitechy\",\"description\":\"Interview Questions\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wikitechy.com\/interview-questions\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4\",\"name\":\"webmaster\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"caption\":\"webmaster\"},\"sameAs\":[\"https:\/\/www.wikitechy.com\/interview-questions\"],\"url\":\"https:\/\/www.wikitechy.com\/interview-questions\/author\/webmaster\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is Responsive Web Design (RWD) ? - Responsive Design -Wikitechy","description":"What is Responsive Web Design (RWD) ? - It is used to make your web page look good, appropriate and well placed on all devices.","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.wikitechy.com\/interview-questions\/web-designing\/what-is-responsive-web-design-rwd\/","og_locale":"en_US","og_type":"article","og_title":"What is Responsive Web Design (RWD) ? - Responsive Design -Wikitechy","og_description":"What is Responsive Web Design (RWD) ? - It is used to make your web page look good, appropriate and well placed on all devices.","og_url":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-responsive-web-design-rwd\/","og_site_name":"Wikitechy","article_published_time":"2022-05-11T09:20:20+00:00","article_modified_time":"2022-05-11T09:22:04+00:00","og_image":[{"url":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/what-is-responsive-web-design-1.png"}],"author":"webmaster","twitter_card":"summary_large_image","twitter_misc":{"Written by":"webmaster","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-responsive-web-design-rwd\/","url":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-responsive-web-design-rwd\/","name":"What is Responsive Web Design (RWD) ? - Responsive Design -Wikitechy","isPartOf":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-responsive-web-design-rwd\/#primaryimage"},"image":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-responsive-web-design-rwd\/#primaryimage"},"thumbnailUrl":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/what-is-responsive-web-design-1.png","datePublished":"2022-05-11T09:20:20+00:00","dateModified":"2022-05-11T09:22:04+00:00","author":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4"},"description":"What is Responsive Web Design (RWD) ? - It is used to make your web page look good, appropriate and well placed on all devices.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-responsive-web-design-rwd\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-responsive-web-design-rwd\/#primaryimage","url":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/what-is-responsive-web-design-1.png","contentUrl":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/what-is-responsive-web-design-1.png","width":2553,"height":764},{"@type":"WebSite","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#website","url":"https:\/\/www.wikitechy.com\/interview-questions\/","name":"Wikitechy","description":"Interview Questions","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wikitechy.com\/interview-questions\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4","name":"webmaster","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","caption":"webmaster"},"sameAs":["https:\/\/www.wikitechy.com\/interview-questions"],"url":"https:\/\/www.wikitechy.com\/interview-questions\/author\/webmaster\/"}]}},"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/4333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/comments?post=4333"}],"version-history":[{"count":4,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/4333\/revisions"}],"predecessor-version":[{"id":4346,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/4333\/revisions\/4346"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/media?parent=4333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/categories?post=4333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/tags?post=4333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}