1024作业 - em,rem与vw的运用 - 作业

px (像素)

绝对单位,不会随浏览器页面大小的变化而变化
px是像素（pixel）的缩写

% (百分比)

相对长度单位：相对于父元素的百分比值，若父元素宽高改变，子元素会随之改变
场景使用：如果是随着父容器或者是整体页面布局而改变尺寸，则使用%更好，如元素的高度和宽度设置。

em (相对长度)

相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸

特点：
- em的值并不是固定的
- em会继承父级元素的字体大小
- 场景使用：为了字体大小的可维护性和伸缩性，推荐使用em，如果存在3层以及3层以上的字体相对尺寸的设置，可以考虑使用rem。

rem(根字号)

rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位

vh 与 vw (视口比例)

视区：浏览器内部的可视区域大小，即 window.innerWidth/window.innerHeight 大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
vw：表示视口的宽度，我们把视口分成100份，1vw就表示当前视口宽度的百分之一, 100vw就是当前是视口宽度的百分之百；
vh：表示视口的高度，1vh就表示当前视口高度的百分之一, 100vh就是当前是视口高度的百分之百；

总结

px: 优点(精确,直观), 缺点: 不灵活
em: 继承字号,永远在随自身和祖先元素
rem: 根字号, 默认是16px,除非人为更新,否则不变(推荐)
vw/vh: 除非不是显式的html视口,才需要显式写出100vw/100vh

. 表格作业

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表格中常用的样式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html {
            font-size: 100px;
        }
        body {
            font-size: 0.16rem;
        }
        @media (max-width: 375px) {
            body {
                font-size: .14rem;
            }
        }
        @media (min-width: 768px) {
            body {
                font-size: .16rem;
            }
        }
        .container {
            max-width: 12rem;
            margin: 0 auto;
            padding: 0 15px;
        }
        @media (max-width: 320px) {
            html {
                min-width: 3.2rem;
            }
            .container {
                width: 3.2rem;
            }
        }
        table {
            width: 100%;
            margin: 15px 0;
            text-align: center;
            border: .01rem solid #eee;
            border-collapse: collapse;
        }
        table caption {
            font-size: 0.32rem;
            border-top: .05rem solid lightcoral;
            border-left: .01rem solid #eee;
            border-right: .01rem solid #eee;
            padding: .1rem;
        }
        table td,
        table th {
            border: .01rem solid #eee;
            height: .3rem;
            padding: .05rem .08rem;
            line-height: .3rem;
        }
        table thead, table tfoot {
            background-color: #fafafa;
        }
        table tbody td[colspan="6"] {
            background-color: #fafafa;
        }
    </style>
</head>
<body>
    <div class="container">
        <table>
            <caption>
                课程表
            </caption>
            <thead>
                <tr>
                    <th>时间</th>
                    <th>周一</th>
                    <th>周二</th>
                    <th>周三</th>
                    <th>周四</th>
                    <th>周五</th>
                </tr>
            </thead>
            <!-- 上午 -->
            <tbody>
                <tr>
                    <td rowspan="4" class="period">上午</td>
                    <td>数学</td>
                    <td>数学</td>
                    <td>数学</td>
                    <td>数学</td>
                    <td>数学</td>
                </tr>
                <tr>
                    <td>数学</td>
                    <td>数学</td>
                    <td>数学</td>
                    <td>数学</td>
                    <td>数学</td>
                </tr>
                <tr>
                    <td>语文</td>
                    <td>语文</td>
                    <td>语文</td>
                    <td>语文</td>
                    <td>语文</td>
                </tr>
                <tr>
                    <td>英语</td>
                    <td>英语</td>
                    <td>英语</td>
                    <td>英语</td>
                    <td>英语</td>
                </tr>
                <tr>
                    <td colspan="6">中午休息</td>
                </tr>
                <tr>
                    <td rowspan="3" class="period">下午</td>
                    <td>音乐</td>
                    <td>音乐</td>
                    <td>体育</td>
                    <td>体育</td>
                    <td>体育</td>
                </tr>
                <tr>
                    <td>美术</td>
                    <td>美术</td>
                    <td>美术</td>
                    <td>美术</td>
                    <td>美术</td>
                </tr>
                <tr>
                    <td>科学</td>
                    <td>科学</td>
                    <td>科学</td>
                    <td>科学</td>
                    <td>科学</td>
                </tr>
            </tbody>
            <!-- 表尾 -->
            <tfoot>
                <tr>
                    <td>备注:</td>
                    <td colspan="5">每天下午15:30-17:30在校写作业</td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
</html>

1024作业 - em,rem与vw的运用

px (像素)

% (百分比)

em (相对长度)

rem(根字号)

vh 与 vw (视口比例)

总结

. 表格作业

效果图

相关文章