1

For example, I have a button. I can set width and height in two ways:

<button></button>

Option 1:

width:30px;
height:30px;

Option 2:

width:10vw;
height:10vh;

If I zoom option 1 - the element will be actually bigger or smaller than what I set. If I zoom option 2- nothing will change, it permanent.

On this website, at least it looks like only the "camera" zooming in and the size of the element won't change. Just like I look closer but nothing really changing. Please look at the button "get started" for example. https://www.wix.com/

How to can I set the button (or any other element) as the way this website did? (effect of camera zooming without change the element size)

Thanks for your help !

Edit:

Left top button in the corner set with px both height and width. https://i.imagesup.co/images2/daa9de845d2e0a90c9a224e7326127a4e5df195b.png

zoom 200%: https://i.imagesup.co/images2/1ea4e157249ded7413e6f00e98da3ef7bccd94fb.png

It's litterly become bigger

lir
  • 21
  • 4
  • @chazsolo I just edited. – lir Sep 17 '20 at 19:55
  • vw and vh are viewport relative units - so zoom doesn't have an affect on them (but resizing the window would). Can you not use these? Can you give an example of your work and what problems you're facing? – chazsolo Sep 17 '20 at 19:56
  • Yes, I added screenshots in the question (under Edit). @chazsolo – lir Sep 17 '20 at 20:03
  • [It's pretty much pointless to try and detect zoom level](https://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers), and impossible with only CSS. If you don't want the buttons to change size despite page zoom, you should stick with using `vw`/`vh` – chazsolo Sep 23 '20 at 18:03

0 Answers0