← Responsive design and media queries lesson New set →

CSS Worksheet: Media Queries

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

Answer key

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

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