How can I put @media queries into HTML?

Question

<body onload="myFunction()" style="margin:0;height:850px">

How can I put @media queries in there? I tried in CSS but it does not work. I think it would be easier if I put it in the HTML body tag.

`@media` is css not html https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries — litelite, Aug 10 '17 at 15:32
@media only screen and (max-width: 1390px) { body { height: 630px; } } — , Aug 10 '17 at 15:38
is this not working because I have overflow-x:hidden in my body tag? — , Aug 10 '17 at 15:39
Please edit your question to add relevent code instead of posting it as a comment — litelite, Aug 10 '17 at 15:40

score 4 · Accepted Answer · edited Dec 11 '21 at 18:15

To make @media queries work you need to put a <meta> viewport tag in the head, like this:

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

If you do that @media queries should work in either a seporate CSS stylesheet or through <style> tags.

score 3 · Answer 2 · answered Aug 10 '17 at 15:36

3

You can inline css styles by using the style tag.

<body>
  <style>
    @media only screen and (max-width: 400px) {
     .body {
       background-color: red;
     }
    }
  </style>
</body>

answered Aug 10 '17 at 15:36

Kevin Upton

2 Answers2