Advanced CSS Techniques
What is adaptive/responsive design?
We can not imagine modern web development without adaptive/responsive designs. It allows users to use web sources equally on any device: a smartphone, a tablet, a desktop, or a TV.
How does it work?
- Development team defines how each element will look depending on the screen size.
- Set the necessary instructions to the code.
- Browser tracks the changes of a viewport.
- Browser applies the rules that the dev team put in the form of the code.
Media-query is what makes adaptive/responsive designs possible. With the help of these queries, developers can set the styles of any element depending on the screen size.
We can perceive media-query as instructions: "If a user screen is a desktop, apply such styles to the element. If a user screen is a smartphone, apply other styles to the element. And so on.".
The basic syntax of the media-query is as follows:
<media_type>- declares the type of device. Possible values:
all- default value. If nothing is specified, the media rule works for all devices.
screen- the media rule works for all devices with the physical screen.
<media_feature>- declares device characteristics. Most common use:
min-width:- the minimum width of the viewport
max-width:- the maximum width of the viewport.
<operator>- media-type and media-feature are separated by the optional logical operator. Its values can be:
In the following chapters, we will consider using media-queries in practice.
Everything was clear?
Section 5. Chapter 1