.ondram
.ondram
PostsComments
KPCKevin Powell - Community
Created by .ondram on 10/7/2024 in #front-end
Ability to zoom out if I want the page to be "larger" on wide screens.
Hi, my webpage contains a lot of text and I wanted to make it more redeable (or less boring) on larger screens (QHD, 4K), so I have used Media Queries (with px) to change font-sizes (in rem) at certain point. Then I have tried it with rem in Media Queries also. The problem is, when I try to zoom out on FHD screen, the page hits these breakpoints and zooms in again on some levels of zoom. I don't want to ruin the zoom out ability on smaller screens, yet have webpage with reasonably large text by default. Could you think of any solution? I also though if it isn't the case that people with 4K monitors, etc. actually desire the small text OR have system-level zoom in turned on (whole system or browser is zoomed in). 
:root {
  --16px: 1rem;
}

@media screen and (min-width: 160rem) { /* 2560px */
  :root {
    --16px: 1.25rem;
  }
}

body {
  font-size: var(--16px);
}
:root {
  --16px: 1rem;
}

@media screen and (min-width: 160rem) { /* 2560px */
  :root {
    --16px: 1.25rem;
  }
}

body {
  font-size: var(--16px);
}
12 replies
KPCKevin Powell - Community
Created by .ondram on 8/26/2023 in #front-end
CSS `image-rendering: pixelated;` works not as described in ~~docs~~
No description
5 replies