HTML5 RESPONSIVE WEB PAGE CHAPTER 18

18th TUTORIAL ON HTML RESPONSIVE WEB DESIGN



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

Setting The Viewport

To create a responsive website, add the following <meta> tag to all your web pages:

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

 

<h2>Setting the Viewport</h2>

<p>This example does not really do anything, other than showing you how to add the viewport meta element.</p>

 

</body>

</html>

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:

Example

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<h2>Responsive Image</h2>

<p>When the CSS width property is set in a percentage value, the image will scale up and down when resizing the browser window. Resize the browser window to see the effect.</p>

<img src="moon.jpg" style="width:100%;">

</body>

</html>

 

OUTPUT

 

Responsive Image

When the CSS width property is set in a percentage value, the image will scale up and down when resizing the browser window. Resize the browser window to see the effect.


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:

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<h1 style="font-size:10vw;">Responsive Text</h1>

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>

<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>

</body>

</html>

OUTPUT

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.

Responsive Web Page - Full Example

A responsive web page should look good on large desktop screens and on small mobile phones.

<!DOCTYPE html>

<html>

<head>

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

<style>

* {

  box-sizing: border-box;

}

.menu {

  float:left;

  width:20%;

  text-align:center;

}

.menu a {

  background-color:#e5e5e5;

  padding:8px;

  margin-top:7px;

  display:block;

  width:100%;

  color:black;

}

.main {

  float:left;

  width:60%;

  padding:0 20px;

}

.right {

  background-color:#e5e5e5;

  float:left;

  width:20%;

  padding:15px;

  margin-top:7px;

  text-align:center;

}

@media only screen and (max-width:620px) {

  /* For mobile phones: */

  .menu, .main, .right {

    width:100%;

  }

}

</style>

</head>

<body style="font-family:Verdana;color:#aaaaaa;">

 

<div style="background-color:#e5e5e5;padding:15px;text-align:center;">

  <h1>Hello World</h1>

</div>

<div style="overflow:auto">

  <div class="menu">

    <a href="#">Link 1</a>

    <a href="#">Link 2</a>

    <a href="#">Link 3</a>

    <a href="#">Link 4</a>

  </div>

  <div class="main">

    <h2>Lorum Ipsum</h2>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

  </div>

  <div class="right">

    <h2>About</h2>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

</div>

</div>

<div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;">© copyright UNKNOWN PROGRAMMER.COM</div>

</body>

</html>

 


Comments

Post a Comment

Popular posts from this blog

HTML5 COMMENTS & CSS CHAPTER 8

Image
EIGHTH TUTORIAL ON HTML COMMENTS & CSS HTML comments are not displayed in the browser, but they can help document your HTML source code. HTML Comment Tags You can add comments to your HTML source by using the following syntax: <!-- Write your comments here --> With comments you can place notifications and reminders in your HTML: <!DOCTYPE html> <html> <body> <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Comments are not displayed in the browser --> </body> </html> OUTPUT This is a paragraph. Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors: <!DOCTYPE html> <html> <body> <!-- Do not display this at the moment <img border="0" src="pic_trulli.jpg" alt="Trulli"> --> </body> HTML  Styles – CSS ...
Read more

HTML FORMS INPUT TYPES CHAPTER 25 PART THREE

Image
25 th TUTORIAL ON HTML FORMS INPUT TYPES PART THREE HTML Input Types This chapter describes the different types for the HTML  <input>  element.   HTML Input Types Here are the different input types you can use in HTML: <input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="text">...
Read more

HTML5 ELEMENTS CHAPTER 4

Image
FOURTH TUTORIAL IS HTML ELEMENTS HTML  Elements An HTML element usually consists of a  start  tag and an  end  tag, with the content inserted in between: < tagname > Content goes here... < /tagname > The HTML  element  is everything from the start tag to the end tag: < p > My first paragraph. < /p > Start tag         Element content         End tag <h1>                      My First Heading                  </h1> <p>                        My first paragraph.        ...
Read more