nash403 / fine-mq

A fine API to manage media queries in JS with ease. It has first-class integration with VueJS.
MIT License
22 stars 4 forks source link

Add a «-» modifier that would mean "everything under my upper bound" ? #1

Closed nash403 closed 3 years ago

nash403 commented 6 years ago

Example

For default aliases, it would generate for example the following queries:

{
  sm: '(max-width: 680px)',
  'sm+': '(min-width: 681px)',
  md: '(min-width: 681px) and (max-width: 1024px)',
  'md-': '(max-width: 1024px)',
  'md+': '(min-width: 1025px)',
  'md!': '(min-width: 681px)',
  lg: '(min-width: 1025px)',
  'lg-': '(max-width: 1024px)',
  landscape: '(orientation: landscape)',
  an_alias_name: 'screen and (min-width: 380px) and (max-width: 768px)'
}

Special rules

It wouldn't generate a «-» modifier for sm because it's lower bound is 0. But lg- is generated for lg because lg's upper bound is Infinty.

nash403 commented 6 years ago

Today, the behavior can be achieved by adding another alias to the set:

{
   ...
   'md-': 1024, // (max-width: 1024px)
   ...

The downside of this is that it would automatically create a md-+ alias with the value (min-width: 1025px) ☹️