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. UBUNTU 测试跑分

    time echo "scale=5000; 4*a(1)" | bc -l -q3.14159265358979323846264338327950288419716939937 ...

  2. netty源码理解（三） 从channel读取数据

    下面的是ServerBootstrap 的内部类 ServerBootstrapAcceptor extends ChannelInboundHandlerAdapter 的方法 这里其实卡住了我很长 ...

  3. 2019-03-08 RF 调试Zibee 数据

  4. 解决jsp表达式不能解析的问题

    在jsp页面用了表达式,但是出现了表达式不能解析的问题 出现的页面如下 原因:web.xml的版本过低,maven自动生成的web.xml版本为2.3,只有2.3以上的版本才支持表达式 解决方法:改w ...

  5. 前端框架VUE

    Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...

  6. python短域名数据分析框架

    本文数据源及分析方法均参考<利用python进行数据分析>一书.但我重新对数据分析目标和步骤进行了组织,可以更加清晰的呈现整个挖掘分析流程. 分析对象为美国某短域名网站记录的短域名生成数据 ...

  7. Go实战--也许最快的Go语言Web框架kataras/iris初识(basic认证、Markdown、YAML、Json)

    ris自称是Go语言中所有Web框架最快的,它的特点如下: 1.聚焦高性能 2.健壮的静态路由支持和通配符子域名支持. 3.视图系统支持超过5以上模板 4.支持定制事件的高可扩展性Websocket ...

  8. IDEA_debug窗口问题,debugger窗口消失,窗口漂浮等

  9. php腾讯面试题（转）

    一.PHP开发部分 1．合并两个数组有几种方式,试比较它们的异同 答:1.array_merge() 2.’+’ 3.array_merge_recursive array_merge 简单的合并数组 ...

  10. Linux make menuconfig查找并快速跳转指定驱动选项

    /********************************************************************** * Linux make menuconfig查找并快速 ...