← Responsive design and media queries lesson New set →

CSS Worksheet: Media Queries

HTML and CSS lesson 19: Responsive design and media queries · Set 294 · 40 questions
TalentJR

Code tip (Does the screen match?): @media (max-width: 600px) { … } applies when the screen is 600px or narrower. @media (min-width: 800px) { … } applies when the screen is 800px or wider. If the media query matches, its rule replaces the normal one; if not, the normal rule stays.

NameDateTime takenScore ___ / 40
  1. 1.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 30px;
      }
    }     (a) Yes (b) No
  2. 2.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) exactly 100px (c) turned off (d) 800px or narrower
  3. 3.📱 What does a media query check? (a) the screen width (b) the battery level (c) the page title (d) the time of day
  4. 4.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 20px;
      }
    }     (a) Yes (b) No
  5. 5.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 22px;
      }
    }     (a) No (b) Yes
  6. 6.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the hr tag (c) the br tag (d) the title tag
  7. 7.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    }
  8. 8.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    }     (a) Yes (b) No
  9. 9.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 16px;
      }
    }     (a) No (b) Yes
  10. 10.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 8px;
      }
    }
  11. 11.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    }
  12. 12.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 18px;
      }
    }     (a) Yes (b) No
  13. 13.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 14px;
      }
    }     (a) Yes (b) No
  14. 14.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    }
  15. 15.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 12px;
      }
    }
  16. 16.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 14px;
      }
    }     (a) No (b) Yes
  17. 17.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    }
  18. 18.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    }
  19. 19.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    }     (a) Yes (b) No
  20. 20.📱 Responsive design means a page ___. (a) never changes (b) has no pictures (c) is only for laptops (d) fits every screen
  21. 21.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 22px;
      }
    }     (a) Yes (b) No
  22. 22.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 28px;
      }
    }     (a) No (b) Yes
  23. 23.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 16px;
      }
    }
  24. 24.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    }
  25. 25.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 20px;
      }
    }
  26. 26.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 26px;
      }
    }     (a) No (b) Yes
  27. 27.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 26px;
      }
    }     (a) No (b) Yes
  28. 28.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 32px;
      }
    }     (a) Yes (b) No
  29. 29.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 20px;
      }
    }
  30. 30.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) exactly 1000px (c) turned off (d) 600px or wider
  31. 31.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 26px;
      }
    }
  32. 32.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    }
  33. 33.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 20px;
      }
    }     (a) No (b) Yes
  34. 34.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 20px;
      }
    }
  35. 35.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 28px;
      }
    }
  36. 36.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    }
  37. 37.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 16px;
      }
    }     (a) No (b) Yes
  38. 38.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 20px;
      }
    }     (a) No (b) Yes
  39. 39.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 16px;
      }
    }
  40. 40.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 12px;
      }
    }     (a) Yes (b) No

Answer key

  1. Yes
  2. 800px or wider
  3. the screen width
  4. No
  5. No
  6. the viewport meta tag
  7. 16
  8. Yes
  9. No
  10. 12
  11. 14
  12. Yes
  13. No
  14. 10
  15. 16
  16. Yes
  17. 10
  18. 12
  19. Yes
  20. fits every screen
  21. No
  22. No
  23. 16
  24. 16
  25. 12
  26. Yes
  27. Yes
  28. Yes
  29. 20
  30. 600px or narrower
  31. 20
  32. 22
  33. No
  34. 20
  35. 28
  36. 24
  37. Yes
  38. Yes
  39. 12
  40. Yes

Free html and css lessons, practice and worksheets at talentjr.in/html-css-for-kids