Make a responsive website use meta tag, without max-width-CodePudding

I want a responsive page that changes when the browser size changes.

I haven't figured it out yet, but I want to use a Meta member!

CodePudding user response：

HTML5 introduced a method to let web designers take control over the viewport, through the tag. You should include the following viewport element in all your web pages:

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

This gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

w3schools

CodePudding user response：

These queries use min-width, and something you can try is setting up a "diagnostic" div on your pages, and that way you know which media query is being used at any given time as you re-size your browser. When you're done you can just delete or comment it out.

@media only screen and (min-width:275px) {
#diagnostic {
 background: #C00 url("https://praestocreative.com/images/css-275px.png") no-repeat 0% 0%;
 width: 150px;
 height: 26px;
 border: 1px solid #FC0;
 margin: 20px auto 0 auto;
 float: none;}
}
@media only screen and (min-width:576px) {
#diagnostic {
 background: #C00 url("https://praestocreative.com/images/css-576px.png") no-repeat 0% 0%;
 width: 150px;
 height: 26px;
 border: 1px solid #FC0;
 margin: 20px auto 0 auto;
 float: none;}
}
@media only screen and (min-width:768px) {
#diagnostic {
 background: #C00 url("https://praestocreative.com/images/css-768px.png") no-repeat 0% 0%;
 width: 150px;
 height: 26px;
 border: 1px solid #FC0;
 margin: 20px auto 0 auto;
 float: none;}
}
@media only screen and (min-width:992px) {
#diagnostic {
 background: #C00 url("https://praestocreative.com/images/css-992px.png") no-repeat 0% 0%;
 width: 150px;
 height: 26px;
 border: 1px solid #FC0;
 margin: 20px auto 0 auto;
 float: none;}
}
@media only screen and (min-width:1200px) {
#diagnostic {
 background: #C00 url("https://praestocreative.com/images/css-1200px.png") no-repeat 0% 0%;
 width: 150px;
 height: 26px;
 border: 1px solid #FC0;
 margin: 20px auto 0 auto;
 float: none;}
}

<div id="diagnostic"></div>

https://jsfiddle.net/jasonbruce/6wzyfcod/4/