About HTML Responsive Web Design

•

🔷 About HTML Responsive Web Design A Thread🧵 👇

📌 HTML Responsive Web Design • Responsive web design is about creating web pages that look good on all devices. • A responsive web design will automatically adjust for different screen sizes and viewports.

→ What is responsive web design? • Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).

📌 Steps For Responsive Web Design → There are many measures taken for making Web page responsive, which are as follows: 1️⃣ Setting the viewport 2️⃣ Responsive Image 3️⃣ Responsive Text Size 4️⃣ Media Queries

📌 Setting The Viewport → To create a responsive website, add the following <meta> tag to all your web pages. → This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling.

📌 Responsive Images • Responsive images are images that scale nicely to fit any browser size. → Using the width property • If the CSS width property is set to 100%, the image will be responsive and scale up and down.

→ Using the max-width property • If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size.

→ Show Different Images Depending on Browser Width • The HTML <picture> element allows you to define different images for different browser window sizes.

📌 Responsive Text Size → The text size can be set with a "vw" unit, which means the "viewport width". → That way the text size will follow the size of the browser window. → Viewport is the browser window size. 1vw = 1% of viewport width.

→ If the viewport is 50cm wide, 1vw is 0.5cm.

📌 Media Queries → In addition to resize text and images, it is also common to use media queries in responsive web pages. → With media queries you can define completely different styles for different browser sizes.

Thanks for reading this thread ❤️ If you like it , make sure you: 🔷 Like the tweet 🔷 Retweet the first tweet ⚡ For more content , follow: @MrunayU