1024作业:em,rem特点,应用场景;使用rem+vw重写课程表案例(无px)

em, rem特点,应用场景

em 特点&应用场景

em是相对于父元素的相对长度单位,是取决于自身的font-size大小.换句话说,如果某个元素未直接定义自身的font-size大小,则受其父元素font-size的影响(继承).特别需要说明的是,该元素的属性(width,height,padding,border,margin等)值都会受此影响.因此,在应用到多层嵌套的div时,可能会有很多计算的困扰~

应用场景

解决文字放大缩小的问题
对页面进行响应式开发时,便于修改
结合px,在内容放大的时候边框”相对变小”,牺牲样式,确保内容尽可能被放大(个人开发习惯)

rem 特点&应用场景

rem是相对于root元素的相对长度单位.通俗的说,具备em的优点,并且不管怎么嵌套div,rem只认html这一个”爹”,不存在”多层认爹”的疑惑.当然,只要html改了font-size,所有使用rem的都会被改变.

应用场景

除了上述em应用场景外,rem改动更便捷
有些页面字体缩放效果,使用rem比em更合适
个人感觉,pc端和移动端都可以优先使用rem,遇到一些标题和下拉菜单等样式(当我们缩放页面时,页面布局乱或者不符合预期),可以酌情使用em或px进行调整.万事不绝对,有些时候,比如浮动的广告banner还是建议使用px[doge.gif]

其他

有一些特殊情况,

当我们希望宽度拉满的时候,还是建议使用100%.或者不能拘泥于em和rem.可以用后者去限制max-width
在页面宽度固定的情况下,尤其是视窗禁止缩放(maximum-scale = 1.0 user-scalable = 0)情况下,比如一些表单页面,或者一些相对更”古老”的系统在特定设备上.用%和px能确保列宽更为合适.起码,这时候em和rem无法体现更大的优势.

为什么推荐使用rem

简单,用一种最友好和容易写的方式能解决90%以上的问题.

课程表重写

效果图,

核心代码及解释

        /*
         朱老师写法
         是把上午,中午休息,下午写到3个tbody中,
         是指除去中午休息这个tbody,其他tbody的第一个tr包含的第一个td的背景色设置为rgb(23, 223, 43)
         */
table tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type{
            background-color: rgb(23, 223, 43);
        }

我的做法是只写了一个tbody,所以这个地方”投机取巧”的代码如下

        table tbody:nth-of-type(n) tr:nth-of-type(5n+1) td:first-of-type{
            background-color: bisque;
        }

另外一种”投机取巧”的写法如下:

        table tbody:nth-of-type(n) tr:nth-of-type(1) td:first-of-type,
        table tbody:nth-of-type(n) tr:nth-last-of-type(3) td:first-of-type{
            background-color: bisque;
        }

第三种”不要脸”的写法如下:

         td[rowspan="4"]{ 
            background-color: bisque;
        }

实际中,可能不会去思考如此复杂的选择器,也不会凑巧知道某个或某些特殊块的”独门属性”.大部分时间是能处理好”首尾”或者”奇偶”就足够了.真是遇到这么复杂的情况,应该还是直接用class写一个样式了,或者在js中做相关处理…当然,能用css解决,就不用js.

课程表完整源代码

<!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>
        .text-align_center {
            text-align: center;
        }
        table {
            border-collapse: collapse;
            width: 50%;
            margin: auto;
            text-align: center;
        }
        table caption {
            font-size: 2rem;
            margin-top: 1rem;
            line-height: 3rem;
        }
        table thead {
            background-color: aquamarine;
        }
        /*
         朱老师写法
         是把上午,中午休息,下午写到3个tbody中,
         所以这里是指除去中午休息这个tbody,其他tbody的第一个tr包含的第一个td的背景色设置为rgb(23, 223, 43)
         */
        /* table tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type{
            background-color: rgb(23, 223, 43);
        } */
        /* 偷鸡写法一
         table tbody:nth-of-type(n) tr:nth-of-type(5n+1) td:first-of-type{ 
            background-color: bisque;
        }*/
        /* 偷鸡写法二 */
        table tbody:nth-of-type(n) tr:nth-of-type(1) td:first-of-type,
        table tbody:nth-of-type(n) tr:nth-last-of-type(3) td:first-of-type{
            background-color: bisque;
        }
        /* 偷鸡写法三 */
        td[rowspan="4"]{ 
            background-color: bisque;
        }
    </style>
</head>
<body>
    <table border="1" cellpadding="10">
        <caption>课程表</caption>
        <thead>
            <tr>
                <th>时间</th>
                <th>周一</th>
                <th>周二</th>
                <th>周三</th>
                <th>周四</th>
                <th>周五</th>
            </tr>
        </thead>
<tbody>
    <tr>
        <td rowspan="4">上午</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="4">下午</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>
</body>
</html>