Highlighted

Media Query doesn't work?

Engaged ,
May 21, 2019

Copy link to clipboard

Copied

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.

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.

Views

168

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Media Query doesn't work?

Engaged ,
May 21, 2019

Copy link to clipboard

Copied

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.

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.

Views

169

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 21, 2019 0
LEGEND ,
May 21, 2019

Copy link to clipboard

Copied

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

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

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 21, 2019 2
Engaged ,
May 21, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 21, 2019 0
LEGEND ,
May 21, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 21, 2019 2
Adobe Employee ,
May 21, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 21, 2019 0
Adobe Community Professional ,
May 21, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 21, 2019 1
osgood_ LATEST
LEGEND ,
May 21, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 21, 2019 0