Viewport Width and Height - Small, Large and Dynamic explained скачать в хорошем качестве

Viewport Width and Height - Small, Large and Dynamic explained

View port units provide 4 different variants for both height and width but why is this? well mainly this is for mobile browsers due to the way some onscreen elements (e.g the address bar) may disappear when scrolling which gives us a different viewport to work with. In these cases the single vh unit would either need to change to reflect the new real estate available or stay the same size but be incorrect. So we have the small view port height which is does not change and always represents the available height with all optional UI elements in place, such as the address bar and navigation buttons. Then we have the large view port height (lvh) which does not change and always represents the available height will no UI elements showing. And finally the dynamic view port height which will change in real time to reflect the available space as these UI elements are shown or hidden. We have the same for width as the above, but currently these units will all return the same value as no mobile browsers place UI elements to the sides of the screen. But in the future if this happens then the width units svw, lvw and dvw will come to our rescue. vh viewHeight svh smallViewHeight lvh largeViewHeight dvh dynamicViewHeight vw viewWidth svw smallViewWidth lvw largeViewWidth dvvw dynamicViewWidth Useful links for more reading: https://web.dev/viewport-units/