Topic 1
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.
Topic 2
In order to guarantee that a responsive webpage appears well on both large desktop screens and smaller devices, such phones, media queries are used to establish distinct layouts for different browser widths. Implementing adaptable designs is made simpler by well-known CSS frameworks like W3. CSS and Bootstrap.
Topic 3
Designers can generate customized style sheets for various devices with CSS media types. All media, print view, and screen-based devices are the targets of the all, print, and screen values. Orientation and viewport sizes such as maximum/minimum height, maximum/minimum width, height, and width are examples of common media attributes. If the media type and features match the device, media queries can be used to apply different CSS styles. The associated style sheets or rules are applied using standard cascading rules.