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.
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):
To create a responsive website, add the following <meta> tag to all your web pages:
Responsive images are images that scale nicely to fit any browser size.
if the CSS width property is set to 100%, the image will be responsive and scale up and down:
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:
The HTML <picture> element allows you to define different images for different browser window sizes.
Resize the browser window to see how the image below changes depending on the width:
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:
Resize the browser window to see how the text size scales.
Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.
Resize the browser window.
Menu Kiri
Menu Utama
Konten Kanan
asd