In this post we will show you how to design a website so that it adapts to different resolutions of screens, smartphones and tablets. Trend that in English is called Responsive Design.
The goal is to use CSS class and properties to adapt a single design to different resolutions. For this we will base the structure of our website and elements in relative measures such as “em” and “%”.
As a result, we will obtain a much more navigable and functional website.
-Main advantages of a web optimized for mobile phones and tablets
- Design adapted to our screen
- Convenience when navigating and reading texts when not having to use the zoom.
- More direct content, irrelevant elements are eliminated.
- Greater visual impact
1. Model your website using relative units:
Instead of using px use % or em for the size of your layers, fonts and images (especially for the width). This will make it easier for you to adapt your website to different resolutions. Initially you can limit the container layer with the max-width property, or set a width in px and then change it to% through @media
2. Add the meta tag viewport in the <head>
This meta tag is used to control how HTML content will appear in mobile browsers.
This ensures that the content fits the width of the device. In this case we are indicating that the content will have the width of the device and that the minimum and maximum scale is 1.
3. We use the @media class to adapt our website
The expression @media of css3, is fundamental. It allows us to establish conditions from CSS to know the device from which you access our website and apply new CSS styles. For example: we can remove the sidebar from our blog if the browser measures less than 600px. 
-The properties that most interest us are the following:
- Width and height: Browser width and height (we can add the prefix min- or max-).
- Device-width and device-height: Device width and height, mobiles and tablets (we can add the prefix min- or max-).
- Orientation: Orientation of the mobile or tablet (for panoramic we will use orientation: portrait, for vertical orientation: landscape).