Media Query doesn't work?

Report · May 21, 2019

Hi,

I am just doing a simple exercise.

Can you tell me why media query doesn't work?

Hosun Kang

Link

EmRem

Tittle was edited by Moderator.

Report · May 21, 2019

Add the 'viewport' meta tag to your <head></head> section:

Edited.

What is it you are testing - I see you are using em and rem - what is it you think should be happening?

Maybe this explanation might help:

Confused About REM and EM? | Jeremy Church

Report · May 21, 2019

Hi,

Thank you very much for your rely.

I added your tag.

It works on Edge, NOT Chrome.

As you see, I am learning EM and REM.

I want to see "px" is responsive under Media Query.

Hosun Kang

Report · May 21, 2019

Hosun wrote
Hi,
Thank you very much for your rely.

I want to see "px" is responsive under Media Query.

Seems to work here in Chrome, the text gets the 5px sizing when the window width is 800px or less.

The idea of working with em is you set the default font size in em on the html tag:

html {

font-size: 2em;

}

Then change to what font-size you need for mobile.

@media (max-width: 800px) {

html {

font-size: 1em;

}

The other em size declarations should adjust themselves in proportion and look better suited to smaller window sizes:

.col__em h1 {

font-size: 2.5em;

}

.col__em p {

font-size: 1em;

}

if you use px:

.col__em h1 {

font-size: 25px;

}

.col__em p {

font-size: 16px;

}

You have to adjust ALL sizes set in px:

@media (max-width: 800px) {

.col__em h1 {

font-size: 20px;

}

.col__em p {

font-size: 14px;

}

.col__em h2 {

font-size: 15px;

}

.col__em h3 {

font-size: 12px;

}

which for some can get a bit tedious. Personally I use px because its more specific.

Report · May 21, 2019

Hi Hosun,

Thank you for using Dreamweaver. As you are trying to learn more about REM, EM, and Pixel, please check this article html5 - Media queries PX vs EM vs REM - Stack Overflow which might help you in providing more information about Media Query and let us know if that helps.

Thanks, Osgood for your helpful input on the post.

Regards,

Harshika

Report · May 21, 2019

Scale fonts to any screen size without media queries. Try it.


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scale Fonts for Any Screen Size</title>
<style>
body {
margin: 0 auto;
width: 80%;
font-family: 
Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
font-size: calc(16px + 1vw);
line-height: calc(1.1em + 0.5vw);
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h2>Heading 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur nostrum similique, dolores enim quam provident, deserunt tempora molestias. Nisi laboriosam quam dolor, officia magni error? Sint nihil dolore debitis doloremque.</p>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · May 21, 2019

Personally l think the use of em and calc to responsively scale font sizes is a bit hit and miss, flakey at best. The most reliable way is to use px although it requires more work and more management.

I prefer to visually look at something and make decisions as to if something needs to be larger or smaller in relationship to something else. I see a lot of websites which have obviously not had the due care and attention thay warrant on mobile views. Whether that is down to financial restrictions or just cant be bothered l have no idea.

Same with breakpoints. A layout needs to be broken when it needs to be not when a framework says it will be broken. If that means adding additional media queries then that is what needs to be done for the best presentation results, some take the extra time and effort others dont.

Adobe Community

Media Query doesn't work?

1 Correct answer