Media Quries

Question 1

Do you understand what a responsive design is and why we need to make a website responsive?

Answer 1

With a responsive site, your site will adapt to each device (Computers, Tablets, & Phones) providing the relevant layout and content that best meets the users’ needs. It also means that your business will only have one site to manage, meaning you’ll only have to update content one time, regardless of how different people consume your content.

Question 2

What is the one CSS tag/rule added to make websites responsive?

Answer 2

Media query (@media): the @media rule, allows you to have one set of style rules for computer screens, and another one for mobile phones and so on.

Question 3

Do you know What media query is and why it is used?

Answer 3

Media query is a feature of CSS that enables a web page’s view to adapt to different screen sizes and resolutions. They are a fundamental part of responsive web design and are used to customize the appearance of websites for multiple devices.

Question 4

Do you know about the different types of media in Media Query?

Answer 4

all: It is used for all media devices.
screen: It is used for computer screen, smartphone, etc.
print: It is used for printer.
speech: It is used for screen readers that read the screen loud.

Question 5

Do you know what breakpoints are in media query?

Answer 5

Breakpoints are markings the website content/layout responds or changes according to the device’s width.

Question 6

Do you know the common media query breakpoints and how you can use them?

Answer 6

@media (max-width: 540px) {…} - Very narrow screens - below 540px
@media (max-width: 720px) {…} - Smartphones - below 720px
@media (max-width: 960px) {…} - Tablets - below 960px
@media (max-width: 1140px) {…} - Laptops - below 1140px
@media (min-width: 1140px) {…} - Large screens - above 1140px

Question 7

Do you know how to write some CSS that only takes effect when the screen size is between 688px and 920px?

Answer 7

The “and” operator is used for combining multiple media features together into a single media query.
Simply set the min and max values to your desired sizes to have a media query affect a certain range of devices.
Example: @media (min-width: 688px) and (max-width: 920px){…}