What is Responsive Web Design
- Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.
The Concept Of Responsive Web Design
- Adjusting Screen Resolution
- Flexible Images
- Custom Layout Structure
- Showing or Hiding Content
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">
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
- 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
Responsive Text
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.
<html>
<body>
<h1 style="font-size: 3vw;">
Responsive Text</h1>
<div style="font-size: 2vw;">
Resize the browser window to see how the text size scales.</div>
<div style="font-size: 2vw;">
Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</div>
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.<br />
</body>
</html>
<body>
<h1 style="font-size: 3vw;">
Responsive Text</h1>
<div style="font-size: 2vw;">
Resize the browser window to see how the text size scales.</div>
<div style="font-size: 2vw;">
Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</div>
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.<br />
</body>
</html>
Responsive Image
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>Responsive Image</h2>
<img src="https://www.wonderplugin.com/videos/demo-image0.jpg" style="max-width:100%;height:auto;">
</body>
</html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>Responsive Image</h2>
<img src="https://www.wonderplugin.com/videos/demo-image0.jpg" style="max-width:100%;height:auto;">
</body>
</html>
Referance : https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
image : https://www.caktusgroup.com/blog/2017/01/04/responsive-web-design/
No comments:
Post a Comment