giving font size rem . doesn't get scaled on other screen sizes
I have used rem units for padding, margin and font size on larege screen the output is fine...but on small screen device the sizes are not reducing instead the larege screen measures presists, why dont rem units reduces relatively?
css
asked Nov 22 '18 at 16:49
Mukilan BaluMukilan Balu
23
add a comment |
I have used rem units for padding, margin and font size on larege screen the output is fine...but on small screen device the sizes are not reducing instead the larege screen measures presists, why dont rem units reduces relatively?
css
asked Nov 22 '18 at 16:49
Mukilan BaluMukilan Balu
23
Because 1rem is supposed to be a font size that is readable on all screens. I.E. not that different between screens. Maybe you were looking for vw or vh instead.
– Mr Lister
Nov 22 '18 at 19:04
add a comment |
I have used rem units for padding, margin and font size on larege screen the output is fine...but on small screen device the sizes are not reducing instead the larege screen measures presists, why dont rem units reduces relatively?
css
asked Nov 22 '18 at 16:49
Mukilan BaluMukilan Balu
23
I have used rem units for padding, margin and font size on larege screen the output is fine...but on small screen device the sizes are not reducing instead the larege screen measures presists, why dont rem units reduces relatively?
css
css
asked Nov 22 '18 at 16:49
Mukilan BaluMukilan Balu
23
asked Nov 22 '18 at 16:49
Mukilan BaluMukilan Balu
23
asked Nov 22 '18 at 16:49
Mukilan BaluMukilan Balu
23
asked Nov 22 '18 at 16:49
Mukilan BaluMukilan Balu
23
asked Nov 22 '18 at 16:49
Mukilan BaluMukilan Balu
23
23
Because 1rem is supposed to be a font size that is readable on all screens. I.E. not that different between screens. Maybe you were looking for vw or vh instead.
– Mr Lister
Nov 22 '18 at 19:04
add a comment |
Because 1rem is supposed to be a font size that is readable on all screens. I.E. not that different between screens. Maybe you were looking for vw or vh instead.
– Mr Lister
Nov 22 '18 at 19:04
Because 1rem is supposed to be a font size that is readable on all screens. I.E. not that different between screens. Maybe you were looking for vw or vh instead.
– Mr Lister
Nov 22 '18 at 19:04
Because 1rem is supposed to be a font size that is readable on all screens. I.E. not that different between screens. Maybe you were looking for vw or vh instead.
– Mr Lister
Nov 22 '18 at 19:04
add a comment |
1 Answer
1
active
oldest
votes
rem is Relative Elastic Measurement and is based on the font size of the body element. If the font size on body is 16px, then 1rem is 16px, no matter what element you have applied this to or the font size of the element.
If you're looking for a measurement that gets larger on large screens and smaller on small screens, may I suggest vw. This is Viewport Width and is the width of the screen as a percentage, e.g. 100vw is the full width of the screen; 50vw is 50% the full width of the screen.
You could then set your padding as 5vw so you had more padding on large screen and less padding on small screen:
ScreenSize 1200px:
padding: 5vw; /* padding: 60px */
ScreenSize 360px:
padding: 5vw; /* padding: 18px */
Even though we haven't changed the value of padding (5vw), the amount of padding has changed (60px and 18px) relative to the screen size.
answered Dec 20 '18 at 15:36
Richard Parnaby-KingRichard Parnaby-King
9,761857111
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53435350%2fgiving-font-size-rem-doesnt-get-scaled-on-other-screen-sizes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
rem is Relative Elastic Measurement and is based on the font size of the body element. If the font size on body is 16px, then 1rem is 16px, no matter what element you have applied this to or the font size of the element.
If you're looking for a measurement that gets larger on large screens and smaller on small screens, may I suggest vw. This is Viewport Width and is the width of the screen as a percentage, e.g. 100vw is the full width of the screen; 50vw is 50% the full width of the screen.
You could then set your padding as 5vw so you had more padding on large screen and less padding on small screen:
ScreenSize 1200px:
padding: 5vw; /* padding: 60px */
ScreenSize 360px:
padding: 5vw; /* padding: 18px */
Even though we haven't changed the value of padding (5vw), the amount of padding has changed (60px and 18px) relative to the screen size.
answered Dec 20 '18 at 15:36
Richard Parnaby-KingRichard Parnaby-King
9,761857111
add a comment |
rem is Relative Elastic Measurement and is based on the font size of the body element. If the font size on body is 16px, then 1rem is 16px, no matter what element you have applied this to or the font size of the element.
If you're looking for a measurement that gets larger on large screens and smaller on small screens, may I suggest vw. This is Viewport Width and is the width of the screen as a percentage, e.g. 100vw is the full width of the screen; 50vw is 50% the full width of the screen.
You could then set your padding as 5vw so you had more padding on large screen and less padding on small screen:
ScreenSize 1200px:
padding: 5vw; /* padding: 60px */
ScreenSize 360px:
padding: 5vw; /* padding: 18px */
Even though we haven't changed the value of padding (5vw), the amount of padding has changed (60px and 18px) relative to the screen size.
answered Dec 20 '18 at 15:36
Richard Parnaby-KingRichard Parnaby-King
9,761857111
add a comment |
rem is Relative Elastic Measurement and is based on the font size of the body element. If the font size on body is 16px, then 1rem is 16px, no matter what element you have applied this to or the font size of the element.
If you're looking for a measurement that gets larger on large screens and smaller on small screens, may I suggest vw. This is Viewport Width and is the width of the screen as a percentage, e.g. 100vw is the full width of the screen; 50vw is 50% the full width of the screen.
You could then set your padding as 5vw so you had more padding on large screen and less padding on small screen:
ScreenSize 1200px:
padding: 5vw; /* padding: 60px */
ScreenSize 360px:
padding: 5vw; /* padding: 18px */
Even though we haven't changed the value of padding (5vw), the amount of padding has changed (60px and 18px) relative to the screen size.
answered Dec 20 '18 at 15:36
Richard Parnaby-KingRichard Parnaby-King
9,761857111
rem is Relative Elastic Measurement and is based on the font size of the body element. If the font size on body is 16px, then 1rem is 16px, no matter what element you have applied this to or the font size of the element.
If you're looking for a measurement that gets larger on large screens and smaller on small screens, may I suggest vw. This is Viewport Width and is the width of the screen as a percentage, e.g. 100vw is the full width of the screen; 50vw is 50% the full width of the screen.
You could then set your padding as 5vw so you had more padding on large screen and less padding on small screen:
ScreenSize 1200px:
padding: 5vw; /* padding: 60px */
ScreenSize 360px:
padding: 5vw; /* padding: 18px */
Even though we haven't changed the value of padding (5vw), the amount of padding has changed (60px and 18px) relative to the screen size.
answered Dec 20 '18 at 15:36
Richard Parnaby-KingRichard Parnaby-King
9,761857111
answered Dec 20 '18 at 15:36
Richard Parnaby-KingRichard Parnaby-King
9,761857111
answered Dec 20 '18 at 15:36
Richard Parnaby-KingRichard Parnaby-King
9,761857111
answered Dec 20 '18 at 15:36
Richard Parnaby-KingRichard Parnaby-King
9,761857111
9,761857111
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53435350%2fgiving-font-size-rem-doesnt-get-scaled-on-other-screen-sizes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Because 1rem is supposed to be a font size that is readable on all screens. I.E. not that different between screens. Maybe you were looking for vw or vh instead.
– Mr Lister
Nov 22 '18 at 19:04