Delving into the world of media queries as a novice, I stumbled upon an interesting condition while developing a Desktop application using electron. Although the CSS concept remains consistent with normal web development, a new challenge presented itself.
Typically, I utilize media queries in the following manner (illustrated here with examples for mobile, tablet, and desktop devices):
// default style for desktop
.my-default-css-code-is-here
// tablet
@media screen and (min-width: 768px) and (max-width: 1024px) {
.my-specific-css-code-for-tablet-is-here
}
// mobile
@media screen and (max-width: 767px) {
.my-specific-css-code-for-mobile-is-here
}
However, a friend posed a unique challenge:
"In this desktop application, we aim to achieve a layout where the window size is greater than 60% for Normal Size, but transitions to Tablet Size (window-size less than or equal to 60% of desktop resolution) when applicable. How can we accomplish this effectively?"
Accustomed to fixed sizes, I found myself uncertain about employing @media screen for this task. Can anyone shed light on this dilemma? Would utilizing a Ratio technique as described in this article be beneficial? Or perhaps implementing it like so?
// Desktop
@media screen and (min-width: 60% from A full Resolution) and (max-width: 100% from A full Resolution) {
}
// Tablet
@media screen and (max-width: 59% from A full Resolution) {
}
Alternatively,
// default css
.my-code-is-here {}
// Tablet
@media screen and (max-width: 59% from A full Resolution) {
.my-code-for-tablet-is-here {}
}
For further clarification, let's consider two laptop types:
Laptop A :
Real resolution = 1368px, meaning 59% from real is 807pxLaptop B :
Real resolution = 2560px, equating to 59% from real being 1510px