Why are absolute units with media queries the CSS industry standard?
I have been programming professionally for 5 years now, and I recently was asked the question: "If viewport values are so good at making responsive designs based on the device dimensions, why not just write CSS in viewport values, to begin with?"
My immediate answer was that it's much easier to write in pixels, as we all know what one pixel looks like, whereas one view-height or one view-width is kind of hard to visually picture when playing around with CSS.
But it does make me wonder, why we don't intrinsically write in relative viewport values, instead of absolute pixel values. I know that media queries were made to make our lives easier, scaling the design based on the device, but that also means that you have to keep a whole separate set of code for each and every device you want to target, adding technical debt and development time.
So why is this still an industry standard?
html css media-queries
asked Jan 18 at 21:30
Jordan BengeJordan Benge
3431317
add a comment |
I have been programming professionally for 5 years now, and I recently was asked the question: "If viewport values are so good at making responsive designs based on the device dimensions, why not just write CSS in viewport values, to begin with?"
My immediate answer was that it's much easier to write in pixels, as we all know what one pixel looks like, whereas one view-height or one view-width is kind of hard to visually picture when playing around with CSS.
But it does make me wonder, why we don't intrinsically write in relative viewport values, instead of absolute pixel values. I know that media queries were made to make our lives easier, scaling the design based on the device, but that also means that you have to keep a whole separate set of code for each and every device you want to target, adding technical debt and development time.
So why is this still an industry standard?
html css media-queries
asked Jan 18 at 21:30
Jordan BengeJordan Benge
3431317
Unless you're using more modern web components like flexbox it's higher velocity and more intuitive to use media queries to change design components for different viewport sizes. Using vw and vh has limited applications when considering how view designs may be different between small and large devices
– Asthmatic
Jan 18 at 21:36
@Asthmatic that makes sense. So for sites that show different content, based on the media query, it would make sense to utilize media queries. But if you had a specific design layout (let's say hybrid mobile apps), it would make more sense to use viewport sizes?
– Jordan Benge
Jan 18 at 21:41
add a comment |
I have been programming professionally for 5 years now, and I recently was asked the question: "If viewport values are so good at making responsive designs based on the device dimensions, why not just write CSS in viewport values, to begin with?"
My immediate answer was that it's much easier to write in pixels, as we all know what one pixel looks like, whereas one view-height or one view-width is kind of hard to visually picture when playing around with CSS.
But it does make me wonder, why we don't intrinsically write in relative viewport values, instead of absolute pixel values. I know that media queries were made to make our lives easier, scaling the design based on the device, but that also means that you have to keep a whole separate set of code for each and every device you want to target, adding technical debt and development time.
So why is this still an industry standard?
html css media-queries
asked Jan 18 at 21:30
Jordan BengeJordan Benge
3431317
I have been programming professionally for 5 years now, and I recently was asked the question: "If viewport values are so good at making responsive designs based on the device dimensions, why not just write CSS in viewport values, to begin with?"
My immediate answer was that it's much easier to write in pixels, as we all know what one pixel looks like, whereas one view-height or one view-width is kind of hard to visually picture when playing around with CSS.
But it does make me wonder, why we don't intrinsically write in relative viewport values, instead of absolute pixel values. I know that media queries were made to make our lives easier, scaling the design based on the device, but that also means that you have to keep a whole separate set of code for each and every device you want to target, adding technical debt and development time.
So why is this still an industry standard?
html css media-queries
html css media-queries
asked Jan 18 at 21:30
Jordan BengeJordan Benge
3431317
asked Jan 18 at 21:30
Jordan BengeJordan Benge
3431317
asked Jan 18 at 21:30
Jordan BengeJordan Benge
3431317
asked Jan 18 at 21:30
Jordan BengeJordan Benge
3431317
asked Jan 18 at 21:30
Jordan BengeJordan Benge
3431317
3431317
Unless you're using more modern web components like flexbox it's higher velocity and more intuitive to use media queries to change design components for different viewport sizes. Using vw and vh has limited applications when considering how view designs may be different between small and large devices
– Asthmatic
Jan 18 at 21:36
@Asthmatic that makes sense. So for sites that show different content, based on the media query, it would make sense to utilize media queries. But if you had a specific design layout (let's say hybrid mobile apps), it would make more sense to use viewport sizes?
– Jordan Benge
Jan 18 at 21:41
add a comment |
Unless you're using more modern web components like flexbox it's higher velocity and more intuitive to use media queries to change design components for different viewport sizes. Using vw and vh has limited applications when considering how view designs may be different between small and large devices
– Asthmatic
Jan 18 at 21:36
@Asthmatic that makes sense. So for sites that show different content, based on the media query, it would make sense to utilize media queries. But if you had a specific design layout (let's say hybrid mobile apps), it would make more sense to use viewport sizes?
– Jordan Benge
Jan 18 at 21:41
Unless you're using more modern web components like flexbox it's higher velocity and more intuitive to use media queries to change design components for different viewport sizes. Using vw and vh has limited applications when considering how view designs may be different between small and large devices
– Asthmatic
Jan 18 at 21:36
Unless you're using more modern web components like flexbox it's higher velocity and more intuitive to use media queries to change design components for different viewport sizes. Using vw and vh has limited applications when considering how view designs may be different between small and large devices
– Asthmatic
Jan 18 at 21:36
@Asthmatic that makes sense. So for sites that show different content, based on the media query, it would make sense to utilize media queries. But if you had a specific design layout (let's say hybrid mobile apps), it would make more sense to use viewport sizes?
– Jordan Benge
Jan 18 at 21:41
@Asthmatic that makes sense. So for sites that show different content, based on the media query, it would make sense to utilize media queries. But if you had a specific design layout (let's say hybrid mobile apps), it would make more sense to use viewport sizes?
– Jordan Benge
Jan 18 at 21:41
add a comment |
0
active
oldest
votes
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%2f54261670%2fwhy-are-absolute-units-with-media-queries-the-css-industry-standard%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f54261670%2fwhy-are-absolute-units-with-media-queries-the-css-industry-standard%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
Unless you're using more modern web components like flexbox it's higher velocity and more intuitive to use media queries to change design components for different viewport sizes. Using vw and vh has limited applications when considering how view designs may be different between small and large devices
– Asthmatic
Jan 18 at 21:36
@Asthmatic that makes sense. So for sites that show different content, based on the media query, it would make sense to utilize media queries. But if you had a specific design layout (let's say hybrid mobile apps), it would make more sense to use viewport sizes?
– Jordan Benge
Jan 18 at 21:41