Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Suggestion: Allow separate maxWidth&minWidth settings for separate properties #12

Open
ItsRyanWu opened this issue Sep 11, 2024 · 2 comments

Comments

@ItsRyanWu
Copy link

For example:

The global settings are

presetFluid({
    maxWidth: 1536,
    minWidth: 320
 })

I wish they are only used for spacing and dimension like

class="f-px-40-80" 

but for typography I would like to apply a separate window width range to for it specifically

class="f-text-32-64" 
presetFluid({
  text: {
    maxWidth: 1280,
    minWidth: 375
  }
})

So in this case, when window changes from 375px to 1280px, the text size will be changed from 32px to 64px, no need to follow the global settings which is scaling in a larger range: 320px to 1536px.

@ItsRyanWu
Copy link
Author

It would be best if we could define the window maxWidth and minWidth inline and at the same time combined it with the breakpoints definition in unocss.

For example

<div class="f-w-20-60 f-w-win-375-1280"></div>
//or
<div class="f-w-20-60 f-w-win-sm-lg"></div>

In this case f-w-win refers to the window width range that's specifically set for width fluid change

@mortona42
Copy link

Similar to this, I would like to use extended min/max only for some ranges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants