インタラクティブWeb-設定

14092 ワード
responsive web テキストリンク

反応式Webに対する設定


ビューポート設定

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1">
値説明width画面幅height画面高さ初期スケーリングuser-スケーリング可能最小スケーリング最大スケーリング目標-指定密度dpi

メディアクエリーの設定


  • @-rule
    cssで特定のルールを表すために使用
    @import,@font-face,@media(<メディアクエリー>)...

  • メディアのプロパティ
    link tagに入力し、メディアクエリー条件に合致するデバイスにcssファイルをロードする場合にのみ使用します.
    • <link rel="stylesheet" href="<파일명>" media="<미디어 쿼리>">
    メディアタイプ説明すべてのデバイスオーディオデバイスライブラリ表示専用点字デバイス手持ち小デバイス印刷プリンタ投影プロジェクタ画面tty端末など画像表示できないデバイスtvテレビエンボス印刷専用点字デバイス
    メディアタイプ演算子
  • only:当該機器のみ
  • No:当該装置を除く
    • メディアの特徴説明widwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwidwiddededededededededededededededededededededededede de
    📌practice01
    メディアクエリーを設定したら、大画面、小画面、移動画面の違いを表示できるかどうかを確認します.🤔
    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>media 쿼리 설정해보기</title>
	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1">
	<style type="text/css">
		/*스마트폰*/
		@media screen and (max-width:  767px){
			body{
				background: pink;
			}
		}
		/*태블릿 pc*/
		@media screen and (min-width:  768px) and (max-width: 959px){
			body{
				background: yellowgreen;
			}
		}
		/*데스크탑*/
		@media screen and (min-width:  960px){
			body{
				background: skyblue;
			}
		}
	</style>
</head>
<body>
	<h1>Responsive Web Practice</h1>
	<p>Responsive Web Practice Responsive Web Practice Responsive Web Practice Responsive Web Practice Responsive Web Practice Responsive Web Practice Responsive Web Practice Responsive Web Practice Responsive Web Practice Responsive Web Practice Responsive Web Practice Responsive Web Practice Responsive Web Practice Responsive Web PracticeResponsive Web Practice Responsive Web PracticeResponsive Web Practice Responsive Web Practice Responsive Web Practice</p>
</body>
</html>

    📌practice01-1
    いろいろな画面を練習して、スマホで画面方向を縦横に切り替えてもいいかどうか練習してみました.
    <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>가로세로 방향 전환</title>
	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1">
	<style type="text/css">
		@media screen and (orientation: portrait){
			/*세로*/
			body{
				background: gray;
			}
		}
		/*가로*/
		@media screen and (orientation: landscape){
			body{
				background: purple;
			}
		}
	</style>
</head>
<body>
	<h1>Responsive Web Practice</h1>
	<p>Responsive Web Practice Responsive Web Practice Responsive Web Practice Responsive Web Practice Responsive Web Practice Responsive Web Practice Responsive Web Practice Responsive Web Practice Responsive Web Practice Responsive Web Practice Responsive Web Practice Responsive Web Practice Responsive Web Practice Responsive Web PracticeResponsive Web Practice Responsive Web PracticeResponsive Web Practice Responsive Web Practice Responsive Web Practice</p>
</body>
</html>

    よい党😊
    Server Setup
    [BOJ 2805]木を切る