fr是css刚出的一个新的单位,目前经过测试在chrome和firefox是可以支持的

举个案列,拿一个网格布局来说吧

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        * {

            margin: 0px;

            padding: 0px;

        }

        .grid {

            height: 500px;

            width: 500px;

            background: #ccc;

            margin: 20px auto;

            overflow: auto;

            display: grid;

            grid-template-columns: repeat(4, 25%);

            grid-column-gap: 10px;

        }

        .column {

            background: #f66;

        }

    </style>

</head>

<body>

    <div class="grid">

        <div class="column">1</div>

        <div class="column">2</div>

        <div class="column">3</div>

        <div class="column">4</div>

    </div>

</body>

</html>

看一下效果

这时会发现下面出现了滚动条,如果不是4个网格而是11个网格呢,那计算起来就非常麻烦了,那个网格布局还提供了另一种写法,就是把算数交给计算机来处理,那就改成这样

grid-template-columns: repeat(4, calc(100%/4));

这样还是有滚动条,那就再进一步优化

grid-template-columns: repeat(4, calc((100% - 10px * 3)/ 4));

这样写就可以消除滚动条,这只是对于少量的网格布局适用,对于无数个网格怎么办呢,这时我们的 fr 单位就出场了

我们来看一个复杂的列子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        * {

            margin: 0px;

            padding: 0px;

        }

        .grid {

            height: 500px;

            width: 500px;

            background: #ccc;

            margin: 20px auto;

            overflow: auto;

            display: grid;

            grid-template-columns: 100px repeat(11, 1fr);

            grid-column-gap: 10px;

        }

        .column {

            background: #f66;

        }

    </style>

</head>

<body>

    <div class="grid">

        <div class="column">1</div>

        <div class="column">2</div>

        <div class="column">3</div>

        <div class="column">4</div>

        <div class="column">5</div>

        <div class="column">6</div>

        <div class="column">7</div>

        <div class="column">8</div>

        <div class="column">9</div>

        <div class="column">10</div>

        <div class="column">11</div>

        <div class="column">12</div>

    </div>

</body>

</html>

看一下效果

用了fr 这个单位就不用去计算了,浏览器会自动去适配,是不是很人性化

css 新单位 fr的更多相关文章

  1. css新单位vw,vh在响应式设计中的应用

    考虑到未来响应式设计的开发,如果你需要,浏览器的高度也可以基于百分比值调整.但使用基于百分比值并不总是相对于浏览器窗口的大小定义的最佳方式,比如字体大小不会随着你窗口改变而改变,如今css3引入的新单 ...

  2. css新单位 vw , vh

    考虑到未来响应式设计的开发,如果你需要,浏览器的高度也可以基于百分比值调整.但使用基于百分比值并不总是相对于浏览器窗口的大小定义的最佳方式,比如字体大小不会随着你窗口改变而改变,如今css3引入的新单 ...

  3. css之单位

    css之单位 角度<angle> 用于<gradient>s和某些transform功能中 deg表示以度为单位的角度.一整圈就是360deg. 例如:0deg,90deg,1 ...

  4. 移动H5开发入门知识，CSS的单位汇总与用法

    说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...

  5. H5移动端开发入门知识以及CSS的单位汇总与用法

    说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...

  6. 2017 css新特性

    2017年要学习的三个CSS新特性 这是翻译的一篇文章,原文是:3 New CSS Features to Learn in 2017,翻译的不是很好,如有疑问欢迎指出. 新的一年,我们有一系列新的东 ...

  7. 如何更愉快地使用em —— 别说你懂CSS相对单位

    前段时间试译了Keith J.Grant的CSS好书<CSS in Depth>,其中的第二章<Working with relative units>,书中对relative ...

  8. 如何更愉快地使用rem —— 别说你懂CSS相对单位

    前段时间试译了Keith J.Grant的CSS好书<CSS in Depth>,其中的第二章<Working with relative units>,书中对relative ...

  9. CSS自定义属性 —— 别说你懂CSS相对单位

    前段时间试译了Keith J.Grant的CSS好书<CSS in Depth>,其中的第二章<Working with relative units>,书中对relative ...

随机推荐

  1. 90%会搞错的JavaScript闭包问题

    由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...

  2. <Java><类加载机制><反射>

    类加载过程 类从被加载到虚拟机内存开始,直到卸载出内存,它的整个生命周期包括:加载(Loading), 验证(Verification), 准备(Preparation), 解析(Resolution ...

  3. L306 词汇题

    Public acceptance of rabbit as an economical source of protein depends on how aggressively producers ...

  4. ipv6地址管理

    为了彻底解决IPv4存在的问题,国际互联网工程任务组从1995年开始,着手研究开发下一代IP协议,即IPv6.可彻底解决IPv4地址不足的问题,除此之外,IPv6还采用分级地址模式.高效IP包头.主机 ...

  5. Android大作业 --音乐播放器

    1.项目成员(本次作业主要对上一次的音乐播放器进行完善) 韦家城 学号:1600802026 班级:161  博客:https://www.cnblogs.com/ln9969cc/ 邓乾尧 学号:1 ...

  6. RIP路由协议（一）

    实验要求:使用RIPv2配置路由器,使路由器能接收到所有的路由条目 拓扑如下: 配置如下: R1enable 进入特权模式configure terminal 进入全局模式interface s0/0 ...

  7. WebService远程调用技术

    1.---------------------------------介绍-------------------------------------------------- (1)远程调用:一个系统 ...

  8. 第四十二课 KMP算法的应用

    思考: replace图解: 程序完善: DTString.h: #ifndef DTSTRING_H #define DTSTRING_H #include "Object.h" ...

  9. [LeetCode&Python] Problem 892. Surface Area of 3D Shapes

    On a N * N grid, we place some 1 * 1 * 1 cubes. Each value v = grid[i][j] represents a tower of v cu ...

  10. ECUST Div2 训练赛3 (只有代码)

    题解见:http://ecustacm.cn/contest/11/announcements A #include<bits/stdc++.h> #define rep(i,a,b) f ...