CyberX

Combining vewport units with media queries

Simple way to do website layout adapted with mobile devices when using double way to render template with width in percents and fixed grid is simple. Just use media queries thats represents only main container fixed width in view port units including other elements with percents only width align:


RevolverRoot {
	width: 1440px;
	margin: 0 auto;
	position: relative;
}

@media screen and (max-width: 1440px) and (min-width: 360px) {
  RevolverRoot {
  	width: 100vw; 
  }

It makes mach more scrren elements adaptive fast and simple.

If you use only percents for width of elements - simple way is using viewport with 0.25 scale:

<meta name="viewport" content="width=device-width, initial-scale=0.25, orientation=auto" />

For percents width align for all base container elements this viewport is better way to adopt your layout for small mobile screens and more large tablets. Fix large layouts scale with media queries if needed and sleep hapy.

This receipts such more as best practices without any third party solutions and not necessary steps for adaptation of proof.

Comments …

You can write here as guest with moderation. Please confirm your person if you have an account or register.

Add a comment as guest
Captcha: