CSS3新增长度单位(二)

CSS3新增长度单位

  • rem:根元素字体的倍数,只与根元素字体大小有关;
  • vw:占视口宽度的百分比;
  • vh:占视口高度的百分比;
  • vmax:占视口中宽和高最大的百分比;
  • vmin:占视口中宽和高最小的百分比。
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>CSS3新增长度单位</title>
    <style>
        .d1 {
            height: 10rem;
            width: 10rem;
            background-color: antiquewhite;
            margin: 0 auto;
            margin-top: 10px;
        }

        .d2 {
            height: 10vh;
            width: 10vw;
            background-color: greenyellow;
            margin: 0 auto;
            margin-top: 10px;
        }

        .d3 {
            height: 10vmax;
            width: 10vmin;
            background-color: rosybrown;
            margin: 0 auto;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>

</html>
相关推荐
陈广亮1 分钟前
React 图表库选型指南:Recharts、ECharts、Nivo、Lightweight Charts 深度对比
前端
zs宝来了4 分钟前
微前端架构:qiankun 沙箱隔离与样式冲突
前端·javascript·框架
M ? A21 分钟前
Vue 的 scoped 样式穿透 React 不支持?用 VuReact 编译就行
前端·javascript·vue.js·react.js·面试·开源·vureact
zs宝来了22 分钟前
Vue 3 Composition API:响应式系统与依赖追踪
前端·javascript·框架
李伟_Li慢慢26 分钟前
wolfram详解山峦算法
前端·算法
村上小树36 分钟前
非常简单地学习一下slate.js的原理
前端·javascript
web打印社区39 分钟前
[特殊字符] 开源好物:web-print-pdf,让 Web 打印像调用接口一样简单!
前端·javascript·vue.js·electron
嗷o嗷o42 分钟前
Android BLE 收到字节流以后,为什么业务状态还是不对
前端
莪_幻尘1 小时前
Prompt 工程化落地:从"手工咒语"到工业级软件系统
前端
荒天帝1 小时前
Android App 最强APM来袭
前端