Responsive Web Design
响应式设计?
同一个页面可以适应不同屏幕大小设备的设计方案
<meta name='viewport' content='width=device-width' initial-scale=1.0' >
响应式图片
- 大图随容器自动缩放,保持宽高比
- max-width: 100%
背景图片
background-size:cover; //背景图片大小不会改变
background-size:contain //背景图片随着容器大小改变而改变
保持宽高比
/* 始终保持高宽比是2:1 */
<div></div>
<style>
div {
height: 0;
paddind-top:50%;
background: #F99;
}
<style>
两栏:自适应布局
- float与BFC
- 绝对定位
- 模拟table
- flex布局
导航栏布局
<nav>
<a href='#' >home</a>
<a href='#' >JavaScript</a>
<a href='#' >HTMl</a>
<a href='#' >CSS</a>
</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>
网格布局, 自动换行
- inline-block + justify
- flex
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</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
针对不同的屏幕 ,引用不同的样式
<link rel='stylesheet' href='m.css' media='screen and (max-width:480px)'>
@media screen and(min-width:480px) {
.selector {...}
}
可以查询的media
- width
- height
- device-width
- device-height
- device-pixel-ratio
- orientation
<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;
}
}