◀︎ ▶︎

<html lang="ja"><meta charset="utf-8">
<meta name="viewport"content="width=device-width,initial-scale=1.0">
<title>レスポンシブ・レイアウト - 1</title>
<style>
html,body{width:100%;
height:100%;
font-size:20px;
text-align:center;}
h1 a{text-decoration:none;}

@media screen and (min-width:200px) and (max-width:449px)
{body{color:tomato;background-color:#ffffff;}}

@media screen and (min-width:450px) and (max-width:499px)
{body{color:indigo;background-color:#eeeeee;}}

@media screen and (min-width:500px) and (max-width:549px)
{body{color:sienna;background-color:#dddddd;}}

@media screen and (min-width:550px) and (max-width:599px)
{body{color:steelblue;background-color:#cccccc;}}

@media screen and (min-width:600px) and (max-width:649px)
{body{color:purple;background-color:#bbbbbb;}}

@media screen and (min-width:650px) and (max-width:699px)
{body{color:	darkcyan;background-color:#aaaaaa;}}

@media screen and (min-width:700px) and (max-width:749px)
{body{color:darkorchid;background-color:#999999;}}

@media screen and (min-width:750px) and (max-width:799px)
{body{color:pink;background-color:#888888;}}

@media screen and (min-width:800px) and (max-width:849px)
{body{color:lightcyan;background-color:#777777;}}

@media screen and (min-width:850px) and (max-width:899px)
{body{color:hotpink;background-color:#666666;}}

@media screen and (min-width:900px) and (max-width:949px)
{body{color:black;background-color:#789abc;}}

@media screen and (min-width:950px) and (max-width:999px)
{body{color:#00ff00;background-color:#456789;}}

@media screen and (min-width:1000px){body{color:#007f6f;
background-color:#eeeeee;}}

@media screen and (min-width:200px) and (max-width:599px)
{.スマホ_タテ{display:block;
margin-left:-10px;
font-size:20px;
color:#004400;
background-color:#aa99aa;}
.スマホ_ヨコ,.タブレット,.パソコン{display:none;}}

@media screen and (min-width:600px) and (max-width:799px)
{.スマホ_ヨコ{display:block;
margin-left:-10px;
font-size:25px;
color:#000000;
background-color:#abcdef;}
.スマホ_タテ,.タブレット,.パソコン{display:none;}}

@media screen and (min-width:800px) and (max-width:999px)
{.タブレット{display:block;
margin-left:-10px;
font-size:30px;
color:#654321;
background-color:#facebc;}
.スマホ_タテ,.スマホ_ヨコ,.パソコン{display:none;}}

@media screen and (min-width:1000px)
{.パソコン{display:block;
margin-left:-10px;
font-size:35px;
color:#000000;
background-color:#dadded;}
.スマホ_タテ,.スマホ_ヨコ,.タブレット{display:none;}}
</style>

<p class="スマホ_タテ">スマートフォン(縦向き)</p>
<p class="スマホ_ヨコ">スマートフォン(横向き)</p>
<p class="タブレット">タブレット(縦向き)</p>
<p class="パソコン">パソコンの画面</p>

</html>