奇舞-応答式-ノート
14953 ワード
Responsive Web Design
レスポンスデザイン?
同じページで異なる画面サイズのデバイスに適応できる設計案
レスポンス画像大図は容器に従って自動的にスケーリングされ、幅比 を維持する. max-width: 100%
背景画像
アスペクト比を保つ
2つのバー:適応レイアウト floatとBFC 絶対位置決め アナログtable flexレイアウト ナビゲーションバーのレイアウト
グリッドレイアウト、自動改行 inline-block + justify flex
Media queryは異なる画面に対して、異なるスタイルを参照します.
検索可能なメディア width height device-width device-height device-pixel-ratio orientation
フォントの設定
レスポンスデザイン?
同じページで異なる画面サイズのデバイスに適応できる設計案
<meta name='viewport' content='width=device-width' initial-scale=1.0' >
レスポンス画像
背景画像
background-size:cover; //
background-size:contain //
アスペクト比を保つ
/* 2:1 */
<div>div>
<style>
div {
height: 0;
paddind-top:50%;
background: #F99;
}
<style>
2つのバー:適応レイアウト
<nav>
<a href='#' >homea>
<a href='#' >JavaScripta>
<a href='#' >HTMla>
<a href='#' >CSSa>
nav>
<style>
body {
margin:0;
}
nav {
display: table;
width: 100%;
background: #00BCD4;
}
nav a {
display: table-cell;
text-decoration:none;
color:#fff;
padding:0 1em;
font: normal 14px/2 Helvetica, sans-serif;
}
nav a:not(:first-child) {
border-left : 1px solid rgba(255,255,255,.7)
}
style>
グリッドレイアウト、自動改行
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
<li>6li>
<li>7li>
ul>
body>
<style type="text/css">
ul {
margin: 0;
padding: 0;
text-align: justify;
}
li {
display: inline-block;
width: 30%;
height: 0;
padding-top: 20%;
background: lightblue;
text-align: center;
margin-bottom: 1em;
}
Media queryは異なる画面に対して、異なるスタイルを参照します.
'stylesheet' href='m.css' media='screen and (max-width:480px)'>
@media screen and(min-width:480px) {
.selector {...}
}
検索可能なメディア
<nav>
<a href="#"> Home a>
<a href="#"> JavaScript a>
<a href="#"> HTML a>
<a href="#"> CSS a>
<a href="#"> HTTP a>
nav>
//css
body {
margin: 0;
}
nav {
display: flex;
width: 100%;
background: #00BCD4;
}
nav a {
flex: 1;
text-decoration: none;
color: #fff;
padding: 0 1em;
font: normal 14px/2 HElvetica, sans-serif;
}
nav a:not(:first-child) {
border-left: 1px solid rgba(255,255,255,.7);
}
@media screen and (max-width: 480px) {
nav {
flex-direction: column;
}
nav a:not(:first-child) {
border-left: none;
border-top: 1px solid rgba(255,255,255,.7);
}
}
フォントの設定
html {
font-size:16px;
}
h1 {
font-size:2rem;
}
p {
font-size: 1rem;
}
@media screen and (max-width: 1000px){
html {
font-size: 14px;
}
}
@media screen and (max-width: 720px) {
html {
font-size:12px;
}
}