css-进阶-css开发技巧-Layout Skill：布局技巧

Layout Skill

使用vw定制rem自适应布局

• 要点：移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制
• 场景：rem页面布局(不兼容低版本移动端系统)
• 兼容：vw、calc()

/* 基于UI width=750px DPR=2的页面 */
html {
    font-size: calc(100vw / 7.5);
}

使用:not()去除无用属性

• 要点：通过:not()排除指定元素不使用设置样式
• 场景：符号分割文字、边界元素排版(首元素、尾元素、左右两边元素)
• 兼容：:not()

<div class="bruce flex-ct-x" data-title="使用:not()去除无用属性">
    <ul class="cleared-attr">
        <li class="first-line">
            <span>A</span>
            <span>B</span>
            <span>C</span>
            <span>D</span>
            <span>E</span>
        </li>
        <li class="second-line">
            <span>A</span>
            <span>B</span>
            <span>C</span>
            <span>D</span>
            <span>E</span>
        </li>
    </ul>
</div>

关键CSS

.first-line span:not(:last-child)::after {
  content: ",";
}
.second-line span:not(:nth-child(-n+3)) {
  display: none;
}

图片.png

使用writing-mode排版竖文

• 要点：通过writing-mode调整文本排版方向
• 场景：竖行文字、文言文、诗词
• 兼容：writing-mode

<div class="bruce flex-ct-x" data-title="使用writing-mode排版竖向文本">
    <div class="vertical-text">
        <h3>情</h3>
        <p>我见犹怜，<br>爱不释手。<br>雅俗共赏，<br>君子好逑。</p>
    </div>
</div>

.vertical-text {
    writing-mode: vertical-rl;
    h3 {
        padding-left: 20px;
        font-weight: bold;
        font-size: 18px;
        color: #f66;
    }
    p {
        line-height: 30px;
        color: #66f;
    }
}

图片.png

使用object-fit规定图像尺寸

• 要点：通过object-fit使图像脱离background-size的约束，使用<img>来标记图像背景尺寸
• 场景：图片尺寸自适应
• 兼容：object-fit

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

<li>
  <h3>ScaleDown</h3>
  <img class="scale-down" src="https://static.yangzw.vip/codepen/ab-2.jpg">
</li>

img {
  width: 100%;
  height: 260px;
  background-color: #3c9;
  &.cover {
    object-fit: cover; // 保持原有尺寸比例。但部分内容可能被剪切
  }
  &.contain {
    object-fit: contain; // 保持原有尺寸比例。内容被缩放。
  }
  &.fill {
    object-fit: fill; // 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
  }
  &.scale-down {
    object-fit: scale-down; // 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
  }
}

图片.png

使用overflow-x排版横向列表

• 要点：通过flexbox或inline-block的形式横向排列元素，对父元素设置overflow-x:auto横向滚动查看
• 场景：横向滚动列表、元素过多但位置有限的导航栏
• 兼容：overflow-x

<div class="bruce flex-ct-y" data-title="使用overflow-x排版横向列表">
    <div class="horizontal-list flex">
        <ul>
            <li>Alibaba</li>
            <li>Tencent</li>
            <li>Baidu</li>
            <li>Jingdong</li>
            <li>Ant</li>
            <li>Netease</li>
            <li>Meituan</li>
            <li>ByteDance</li>
            <li>360</li>
            <li>Sina</li>
        </ul>
    </div>
    <div class="horizontal-list inline">
        <ul>
            <li>Alibaba</li>
            <li>Tencent</li>
            <li>Baidu</li>
            <li>Jingdong</li>
            <li>Ant</li>
            <li>Netease</li>
            <li>Meituan</li>
            <li>ByteDance</li>
            <li>360</li>
            <li>Sina</li>
        </ul>
    </div>
</div>

.horizontal-list {
    overflow: hidden;
    width: 300px;
    height: 100px;
    & + .horizontal-list {
        margin-top: 10px;
    }
    ul {
        overflow-x: auto;
        cursor: pointer;
        &::-webkit-scrollbar {
            height: 10px;
        }
        &::-webkit-scrollbar-track {
            background-color: #f0f0f0;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: 5px;
            background-color: #f66;
        }
    }
    li {
        overflow: hidden;
        height: 90px;
        background-color: #66f;
        line-height: 90px;
        text-align: center;
        font-size: 16px;
        color: #fff;
        & + li {
            margin-left: 10px;
        }
    }
    &.flex {
        ul {
            display: flex; 
            flex-wrap: nowrap;
            justify-content: space-between;
        }
        li {
            flex-shrink: 0;
            flex-basis: 90px;
        }
    }
    &.inline {
        height: 102px;
        ul {
            overflow-y: hidden;
            white-space: nowrap;
        }
        li {
            display: inline-block;
            width: 90px;
        }
    }
}

使用text-align-last对齐两端文本

• 要点：通过text-align-last:justify设置文本两端对齐
• 场景：未知字数中文对齐
• 兼容：text-align-last

<div class="bruce flex-ct-x" data-title="使用text-align-last对齐两端文本">
    <ul class="justify-text">
        <li>账号</li>
        <li>密码</li>
        <li>电子邮件</li>
        <li>通讯地址</li>
    </ul>
</div>

.justify-text {
    li {
        padding: 0 20px;
        width: 100px;
        height: 40px;
        background-color: #f66;
        line-height: 40px;
        text-align-last: justify;
        color: #fff;
        & + li {
            margin-top: 5px;
        }
    }
}