Can Media Query Using Dynamic Size on width? - html

Question

I'm new when using media query, but I just found out when trying to develop a Desktop application (using electron but the CSS concept is still the same as normal web development) that there is a condition like this.
usually I'm using media screen like this (in this example I'm using 3 device as example: mobile, tablet, & desktop):
// 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
}
but my friend ask me like this:
"For this desktop application we want to have a layout like this: Normal Size (window-size): > 60% and when has a tablet size than at least the style will change if window around Tablet Size (window-size): <= 60% desktop resolution (Laptop or PC resolution such as HD, retina, etc. ) How can we achieve this?"
Since I'm usually using fixed size, I don't know if #media screen can achieve this. can someone help me about this problem? I'm quite confused myself about this. can I use Ratio like in this article ? or can I just apply it like this?
// 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) {
}
or
// default css
.my-code-is-here {}
// Tablet
#media screen and (max-width: 59% from A full Resolution) {
.my-code-for-tablet-is-here {}
}
for more information, Let say if there is 2 type of laptop:
Laptop A :
Real resolution = 1368px, The it means 59% from real is 807px
Laptop B :
Real resolution = 2560px, The it means 59% from real is 1510px

Answer 1

if you want your media screen be dynamic. you can use npm package postcss-media-variables
this package allow you to use css variable in media query. you can set your css variable in javascript and use it in media query like :
:root {
--min-width: 1000px;
}
#media (min-width: var(--min-width)) {}
you can change your css variable --min-width in javascript

Answer 2

Although I'm not entirely sure to understand what you are trying to achieve, I can explain quickly about vw (width of the viewport) and vh (height of the viewport). These two values are relative to the current displayed viewport only and for that reason, will change if you are displaying the website on a desktop screen (lets say 1920px by 1080px) (vw by vh) compared to displaying the website on a tablet (much less for vw and vh).
Said another way, they don't depend on the device itself, whether it's a laptop or a mobile phone, but only on the actual active viewport (viewport = the browser windows size). More info here: https://www.w3schools.com/cssref/css_units.asp
From what I understand of your friend's request, you should/could still use fixed values for your media queries, customizing them to fit your website actual layout on each screen size.