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>