1.响应式布局介绍
一个网站能够兼容多个终端，而不需要为每个终端做一个特定的版本。
这个概念是为解决移动互联网浏览而产生的。
优缺点：
优点：1）面对不同分辨率设备灵活性高 2）能够快捷解决多设备显示
缺点：1）兼容各种设备工作量大 2）代码累赘，加载时间长
2.响应式布局的实现
2.1 CSS中的Media Query(媒介查询)
设置宽高:device-width、device-height
渲染窗口的宽和高：width、height
设备的手持方向:orientation
设备的分辨率：resolutionn
2.2 使用方法
- 外部引入
当前屏幕最大宽度为640px，使用该css样式
<link href="style.css" type="text/css" rel="stylesheet" media="only screen and (max-width:640px)">
-
内联
2.3 媒体查询基础语法
-
媒体查询规则
媒体查询规则
-
常见屏幕尺寸
-
最佳实践
3.响应式布局实例
1）响应式表格
小于480px
大于480px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
font-size:30px;
text-align:center;
color:#666666;
}
table{
width:98%;
margin:0 auto;
border:1px solid #666666;
border-collapse:collapse;
box-shadow:0 0 10px 0 rgba(0,0,0,0.5)
}
table th,table td{
border:1px solid #666666;
padding:.5em 1em;
text-align: center;
}
table th{
background-color:#35B558;
}
table tr td a{
color:#ff5c00;
text-decoration:none;
}
@media only screen and (max-width:480px){
table{
box-shadow:none;
border:none;
}
table .thead{
display:none;
}
table tr, table td{
display:block;
position:relative;
}
table tr .num{
background-color:#35B55B;
padding-left:28%;
text-align: left;
}
table tr .num::before{
content:"课程序号";
position:absolute;
left:0.5em;
top:0.5em;
font-weight:bold;
}
table tr .name{
padding-left:28%;
text-align: left;
}
table tr .name::before{
content:"课程名称";
position:absolute;
left:0.5em;
top:0.5em;
font-weight:bold;
}
.action{
position:absolute;
right:0;
top:0;
border: none;
}
}
</style>
</head>
<body>
<h1>课程列表</h1>
<table>
<tr class="thead">
<th>课程序号</th>
<th>课程名称</th>
<th>课程操作</th>
</tr>
<tr>
<td class="num">150406</td>
<td class="name">移动应用开发课程</td>
<td class="action">
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td class="num">150408</td>
<td class="name">web应用开发</td>
<td class="action">
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr >
<td class="num">140406</td>
<td class="name">数据库&操作系统开发教程</td>
<td class="action">
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr >
<td class="num">151106</td>
<td class="name">智能硬件和物联网开发教程</td>
<td class="action">
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
</table>
</body>
</html>
2)响应式图片
-
用srcset和sizes加载不同图片
vw表示% w表示width
-
利用picture source实现
- 兼容不好可以引入Picturefill的js文件，能够解决兼容问题
网友评论