css技术技巧

layout skill

使用vw定制rem自适应布局

  • 要点：移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制。

  • 场景：rem页面布局（不兼容低版本移动端系统）

  • 兼容：vw，calc（）

    1
    2
    3
    4
    /* 基于UI width=750px DPR=2的页面 */
    html{
    	font-size: calc(100vw / 7.5);
    }
使用:nth-child()筛选指定元素
  • 要点：通过:nth-child()筛选指定的元素设置样式。
  • 场景：表格着色，边界元素排版（首元素，尾元素，左右两边元素）
使用writing-mode排版竖文
  • 要点：通过writing-mode调整文本排版方向。
  • 场景：竖行文字，文言文，诗词。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            background-color: #000;
        }
        .vertical-text{
            writing-mode: vertical-rl;
        }
        .vertical-text h3{
            padding-left: 20px;
            font-weight: bold;
            font-size: 18px;
            color: #f66;
        }
        .vertical-text p{
            line-height: 30px;
            color: #66f;
        }
    </style>
</head>
<body>
    <div class="vertical-text">
        <h3>情</h3>
        <p>我见犹怜，<br>爱不释手。<br>雅俗共赏，<br>君子好逑。</p>
    </div>
</body>
</html>

本文标题:css技术技巧

文章作者:陈楚吟

发布时间:2020-06-25, 15:43:19

最后更新:2020-06-26, 11:59:30

原始链接:http://yoursite.com/2020/06/25/css技术技巧/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. layout skill
    1. 1.0.1. 使用vw定制rem自适应布局
    2. 1.0.2. 使用:nth-child()筛选指定元素
    3. 1.0.3. 使用writing-mode排版竖文
|