Responsive web-design principles

Question 1

How to create a media query:

Answer 1

Media Queries are a new technique introduced in CSS3 that change the presentation of content based on different viewport sizes.

Question 2

Media query examples:

Answer 2

@ media ( max-width: 100px ) { /* CSS Rules */ }

@ media ( min-height: 350px ) { /* CSS Rules */ }

Question 3

How to make images responsive:

Answer 3

. responsive-img {
max-width: 100% ;
height: auto ;

Question 4

How to use a Retina Image for Higher Resolution Displays

Answer 4

Some displays are made with higher pixel density nowadays, a way to insure that your image will not look pixelated in such displays is by setting their width and height to half their original values.

Question 5

The four different viewport units:

Answer 5

• vw (viewport width): 10vw would be 10% of the viewport’s width.
• vh (viewport height): 3vh would be 3% of the viewport’s height.
• vmin (viewport minimum): 70vmin would be 70% of the viewport’s smaller dimension (height or width).
• vmax (viewport maximum): 100vmax would be 100% of the viewport’s bigger dimension (height or width).