Responsive Web Design
Responsive Web Design uses HTML and CSS to adjust the elements on a webpage for different device sizes. To see the viewpoint of a website, the <meta> tag is added, which tells the browser how to control the dimensions and scaling for various devices. For example, responsive images can scale to fit any browser size by setting their width to max or 100%, allowing the image to resize without exceeding the original file size. The <picture> element is used to define different images for different browser window sizes, and responsive text can be set using viewpoint width to adjust based on the browser size.
Media Queries
Media Queries are used to define different styles for varying browser sizes, ensuring that a responsive webpage looks good on both large desktop screens and smaller devices such as a phone. Popular CSS frameworks like W3.CSS and Bootstrap make it easier to implement responsive designs. The @media rule allows designers to set different style rules for specific media types, such as device width, height, orientation, and resolution.
Media Types
CSS media types allow designers to create tailored style sheets for different devices. The all, print, and screen values target all media, print view, and screen-based devices. Common media features include orientation (the viewports orientation), and viewport sizes like max/min-height, max/min width, height, and width. Media queries can be used to apply alternate CSS styles if the media type and features math the device, with the corresponding style sheets or rules applied following normal cascading rules.