UX Design for Mobile

Responsive behavior

A page with responsive behavior uses media queries to manage the position and size of the elements that form the web page.

A media query is a CSS instruction that sets a different style based on the properties of the user device, such as the screen size. In the following example, we use media queries to change the size of the content according to the screen size, making the content go full width on 640 px-wide screens or smaller, and making content narrower for screens wider than 1024 px:

@media only screen and (min-width:1024px) {    .content {       width: 80%;    }}@media only screen and (max-width:640px) {    .content {       width: 100%;    }}

Media queries allow you to easily define different layouts that target different devices. We ...