2.HTML&CSS(11)応答型サイト利用

43775 ワード
CSS Web UI html テキストリンク

1.反応型サイト

  • Webページ
    • は、モニタの種類に応じて画面サイズを自動的に調整して最適化できます.

    主な機能

  • PC、Table、およびモバイル応答局

    • スタイルについて

  • PC
    タイトル:背景色ピンク、フォント14/#fff
    content:最大横長900 px、リスト間隔10 px、リストフォント14 px/#000
    フッター:背景色#ccc、フォント14/#000

  • Tablet
    タイトル:背景色lightseagreen、フラグフォント40/#fff、メニューフォント25/#fff
    content:リストピッチ8 px、リストフォント14 px/#fff
    フッター:背景色lightcoral、フォント14/#000

  • Mobile
    タイトル:背景色lightseagreen、ロゴフォント40/#fff
    タイトルGNB:背景色lightslategray,フォント25/#fff
    content:リストピッチ8 px、リストフォント14 px/#fff
    フッター:背景色lightcoral、フォント14/#000

    • プライマリ・ラベルと属性

  • HTML
    div, header, footer, nav, section
  • CSS
    メディアクエリのプロパティ(論理演算子を使用)

    • 2.反応型Web-PC


    実際,反応型Webプロジェクトでは,mobile firstの概念を用いて作成されることが多い.Kebakeですが、モバイルデバイスを先に使用し、メディアクエリーを使用して大画面に応答するのが一般的です!

    1)HTML練習

    <!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width==device-width, initial-scale=1.0">
		<title>반응형 웹</title>
		<link rel="stylesheet" href="./reset.css">
		<link rel="stylesheet" href="./responsive.css">
	</head>
	<body>
		<div class="wrap">
			<header>
				<a href="#" class="logo"><h1>LOGO</h1></a>
				<a href="#" class="gnb_menu">gnb menu</a>
				<nav>
					<a href="#">MENU1</a>
					<a href="#">MENU2</a>
					<a href="#">MENU3</a>
					<a href="#">MENU4</a>
					<a href="#">MENU5</a>
					<a href="#">MENU6</a>
					<a href="#">MENU7</a>
					<a href="#">MENU8</a>
				</nav>
			</header>
			<section>
				<ul class="list">
					<li>
						<a href="#" class="inner">
							<div class="thumb">
								<img src="thumb.png" alt="썸네일이미지">
							</div>
							<div class="title">
								타이틀을 길게 써보도록 하겠습니다. 썸네일보다 길게
							</div>
						</a>
					</li>
					<li>
						<a href="#" class="inner">
							<div class="thumb">
								<img src="thumb.png" alt="썸네일이미지">
							</div>
							<div class="title">
								타이틀입니다.
							</div>
						</a>
					</li>
					<li>
						<a href="#" class="inner">
							<div class="thumb">
								<img src="thumb.png" alt="썸네일이미지">
							</div>
							<div class="title">
								타이틀입니다.
							</div>
						</a>
					</li>
					
	<!-- ~~~~~~~~~~~~~~~~~~ 생 략 ~~~~~~~~~~~~~~~~~~ -->
				</ul>
			</section>
			<footer>
				Copyright © NAVER Corp. All Rights Reserved.
			</footer>
		</div>
	</body>
</html>

    (1)


    2）CSS実践

    @charset "UTF-8";
a{
    text-decoration: none;
}
header{
    overflow: hidden;
    background-color: pink;
    padding: 20px;
}
.logo{
    float: left;
    font-size: 20px;
    color: #fff;
}
nav{
    float: right;
}
nav a{
    padding: 0 5px;
    font-size: 20px;
    color:#fff;
}
footer{
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #ccc;
    font-size: 14px;
    color: #000;
}
section{
    overflow: hidden;
    max-width: 900px;
    margin: 50px auto;
}
.list{
    margin: -5px;
    overflow: hidden;
}
.list li{
    float: left;
    width: 20%;
}
.inner{
    display: block;
    margin: 5px;
    border: 1px solid #000;
}
.thumb img{
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* 넘치는 텍스트 말줄임 */
.title{
    overflow: hidden;
    padding: 5px 0;
    text-align: center;
    font-size: 14px;
    color: #555;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    3.反応型Web Table

  • PCで生成するページをタブレット環境に適したページ
    • に変更する.
  • メディアクエリの標準は、特定のデバイスの解像度を指定するというよりは、その解像度の下でレイアウトを最適化したり、コンテンツを表示したりすることである.

    • 1）CSS実践


    max-width: 768px ❗❗
    @media screen and (max-width: 768px), screen and (max-height: 768px) and (orientation: landscape)  {
	header{
		background-color: lightseagreen;:
	}
	.logo{
		width: 100px;
		float: none;
		display: block;
		margin: 0 auto;
		font-size: 40px;
		text-align: center;
	}
	nav{
		overflow-x: auto;
		overflow-y: hidden;
		margin-top: 20px;
		float: none;
		white-space: nowrap;
	}
	nav a{
		font-size: 25px;
	}
	footer{
		background-color: lightcoral;
		color: #fff;
	}
	.list {
		margin: -4px;
	}
	.list li{
		width: 25%;
	}
	.inner{
		position: relative;
		margin: 4px
	}
	.title{
		position: absolute;
		left:0; right:0; bottom:0;
		padding: 10px 0;
		background-color: rgba(0,0,0,0.2);
		color:#fff;
	}
}

    4.反応型ネットワーク移動

  • モバイル版は横長が狭く、PCやタブレットのように一度に多くの内容を表現することができないため、リストの場合は스크롤下に下がり、より見やすいレイアウトが一般的です.

    • 1）CSS実践

    @media screen and (max-width: 375px), screen and (max-height: 375px) and (orientation: landscape) {
	header{
		padding: 10px 0;
	}
	nav{
		display: none;
		position: absolute;
		top: 60px;
		left:0;
		bottom: 0;
		z-index: 10;
		width: 200px;
		margin:0;
		background-color: lightslategray;
	}
	nav a{
		display: block;
		padding: 20px 10px;
		font-size: 20px;
		border-bottom: 1px solid #fff;
	}
	.gnb_menu{
		position: absolute;
		top: 12px;
		left:12px;
		display: block;
		width: 40px;
		height: 35px;
		font-size: 1px;
		color: transparent;
		background: linear-gradient(#fff 50%, transparent 50%);
		background-size: 100% 10px;
	}
	section{
		margin: 0;
	}
	.list li {
		width: 100%;
	}
	.inner{
		display: table;
		table-layout: fixed;
		width: 100%;
		margin: 0;
		border: none;
		border-top: 1px solid #000;
	}
	.thumb{
		display: table-cell;
		width: 100px;
	}
	.title{
		display: table-cell;
		position: relative;
		right:auto;
		left: auto;
		bottom: auto;
		vertical-align: middle;
		background-color:#fff;
		padding: 8px;
		color:#000;
		text-overflow: inherit;
		white-space: inherit;
		text-align: left;
	}
}

    2）注意事項


    htmlファイル-headに次のコードを追加します.
    <meta name="viewport" content="width==device-width, initial-scale=1.0">
  • モバイルバージョンで追加されたgnb menuはPCバージョンでは表示されないため、以下のコードをPCバージョンのcssコードに追加します.
    • .gnb_menu{
    display: none;
}
  • このコードは、モバイルメディアクエリでdisplay: blockとして使用され、モバイル画面にのみ表示されます.
    • How to communicate with PI Through the SSH
    Changing the TCP RTO value in Linux