CSS

responsive website CSS

/* Instead of using px measurements, use % when setting width or height.*/
/* The % is calculted from the width of the parent element.*/
#NonResponsiveWidth {
	width: 1080px;
    height: auto;
}
#responsiveWidth {
	width: 85%;
    height: auto;
}
/*For text, use vw (viewport-width) instead of px when setting font-width*/
#NonResponsiveText { font-size: 20px; }
#responsiveWidth { font-size: 10vw; }

responsive web design with html5 and css

// media queries example

	/* wide laptop */
@media screen and (max-width: 1200px) {
	.home-hero-image {
		height: 50vh;
	}
}

/* small laptop */
@media screen and (max-width: 900px) {
	.home-hero-image {
		height: 60vh;
	}
	.hero-text-home {
		margin-top: 25px;
	}
	.hero-school-home-image {
		width: 40%;
	}
}

responsive web design with html5 and css: develop future-proof responsive websites using the latest html5 and css techniques

/*Pro-tip: Use percentages while positioning or sizing elements 
	ex:*/

	.example {
    	width:100%;
      	height:50%;
		left: 10%;
    }