Responsive CSS viewport tag-CodePudding

I'm learning about the responsive CSS styling. I'm trying the example code on the w3schools but the viewport tag doesn't seem to work. When i change the initial-scale value or the content from width=device-width to for. e.g. 300 NOTHING happens! I've tested the code on both my desktop FireFox and Opera browsers...

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

.header {
  border: 1px solid red;
  padding: 15px;
}

.menu {
  width: 25%;
  float: left;
  padding: 15px;
  border: 1px solid red;
}

.main {
  width: 75%;
  float: left;
  padding: 15px;
  border: 1px solid red;
}
</style>
</head>
<body>

<div >
  <h1>Chania</h1>
</div>

<div >
  <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
  </ul>
</div>

<div >
  <h1>The City</h1>
  <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
  <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</body>
</html>

CodePudding user response：

viewport mode is mostly used for mobile browsers. It is normal that nothing changes in desktop versions.

CodePudding user response：

You should include @media queries in your page. For e.g

@media only screen and (max-width: 768px) {
     /*CSS goes here*/
}

Check this https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mediaquery

CodePudding user response：

What do you mean by 'Nothing Happens'? What exactly do you expect as the output? I guess you should check out CSS Media Queries, it looks like this:

    /* On screens that are 992px or less, set the Max-width to 900px */    @media screen and (max-width: 992px) {body {max-width: 900px;}}    /* On screens that are 600px or less, set the Max width to 600px */    @media screen and (max-width: 600px){body {max-width: 600px;}}