HTML and CSS - the box model: Getting Intimate with Elements(mediaattribute)

Head First HTML and CSS
(O'Reilly Media)
Elisabeth Robson (著), Eric Freeman (著)

開発環境

• OS X Yosemite - Apple (OS)
• Safari, Firefox + Firebug, Google Chrome(Webプラウザ、プラグイン)
• BBEdit - Bare Bones Software, Inc. (GUI) , Emacs (CUI) (Text Editor)
• HTML (マークアップ言語)
• Cascading Style Sheets(CSS) (スタイルシート)

Head First HTML and CSS(Elisabeth Robson (著)、 Eric Freeman (著)、O'Reilly Media)のChapter 9(the box model: Getting Intimate with Elements)、Exercise(p.402)を解いてみる。

HTML (BBEdit, Emacs)

<link rel="stylesheet" href="lounge-smartphone.css"
      media="screen and (max-device-width: 640px)" >
<link rel="stylesheet" href="lounge-tablet-portrait.css"
      media="screen and (max-device-width: 1024px) and (orientation: portrait)" >
<link rel="stylesheet" href="lounge-tablet-landscape.css"
      media="screen and (max-device-width: 1024px) and (orientation: landscape)" >
<link rel="stylesheet" href="lounge-pc.css"
      media="screen and (max-device-width: 1280px)" >
<link rel="stylesheet" href="lounge-tv.css"
      media="screen and (max-device-width: 2650px)" >