HTML5 - CSS - The Box Model: Getting Intimate with Elements(media queries, screen, max-device-with, orientation(portrait, landscape))

Head First HTML and CSS

開発環境

• macOS Sierra - Apple (OS)
• Emacs (Text Editor)
• Safari(Web browser)

Head First HTML and CSS (Elisabeth Robson(著)、Eric Freeman(著)、O'Reilly Media)の Chapter 9.(The Box Model: Getting Intimate with Elements)、EXERCISE(No. 6524) を取り組んでみる。

EXERCISE(No. 6524)

コード(Emacs)

HTML5

<link rel="stylesheet" media="screen and (max-device-with: 480px)">
<link rel="stylesheet"
      media="screen and (max-device-with: 768) and (orientation: portrait)">
<link rel="stylesheet"
      media="screen and (max-device-with: 1024px) and (orientation: landscape)">
<link rel="stylesheet" media="screen and (max-device-with: 1280px)">
<link rel="stylesheet" media="screen and (max-device-with: 2650px)">