My Hugo Journey

HOME

Responsive Web Design

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):

Setting The Viewport When making responsive web pages, add the following element in all your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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:
Remove spaces either side of brackets.
< img src="img_girl.jpg" style="width:100%;" >
Notice that in the example above, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead. 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:
< img src="img_girl.jpg" style="max-width:100%;height:auto;" >

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:

<h1 style="font-size:10vw">Hello World</h1>

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.

Frameworks

There are many existing CSS Frameworks that offer Responsive Design.

They are free, and easy to use.

Using W3.CSS

A great way to create a responsive design, is to use a responsive style sheet, like W3.CSS

W3.CSS makes it easy to develop sites that look nice at any size; desktop, laptop, tablet, or phone:

<!DOCTYPE html> <html> <title>My Web</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="w3.css">`

Bootstrap

Another popular framework is Bootstrap, it uses HTML, CSS and jQuery to make responsive web pages.