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. 集成学习-xgboost

    等同于xgboost是个准曲率很高的集成学习框架,在很多比赛中成绩优异. 大多数的集成学习都使用决策树作为基分类器,主要是因为本身要训练多个分类器,而决策树速度很快,总体时间相对较少. 决策树 在讲x ...

  2. 重启uwsgi脚本备份

    NAME="identifyImg_uwsgi.init" if [ ! -n "$NAME" ];then echo "no arguments&q ...

  3. python 模块基础 和常用的模块

    模块的定义 一个模块就是以.py结尾的python 文件,用来从逻辑上组织python代码.注意,模块名和变量名一样开头不能用数字,可以是双下划线和字母. 为什么要用模块? 将一些复杂的需要重复使用的 ...

  4. BF字符串匹配算法

    Brute Force算法是普通的模式匹配算法,BF算法的思想就是将目标串S的第一个字符与模式串T的第一个字符进行匹配,若相等,则继续比较S的第二个字符和 T的第二个字符: 若不相等,则比较S的第二个 ...

  5. 【转载】 从ACM会议看中国大陆计算机科学与国外的差距

    ps:   这是一篇06年的文章,与今日的国内计算机行业学术圈环境简直是天翻地覆,很不错的history,值得mark下,今日的cs学术发展十号是坏不发表意见,但是history是值得对比,借鉴,思考 ...

  6. Anaconda 的基本使用

    Anaconda常用的Python版本管理工具和Python包管理软件,conda是Anaconda中的具体管理工具,下载地址为: https://www.anaconda.com/distribut ...

  7. angular-translate

    angular.module('app.core', ['pascalprecht.translate']).config(['$translateProvider', '$translatePart ...

  8. golang相关网摘

    1.golang开发50个坑 http://devs.cloudimmunity.com/gotchas-and-common-mistakes-in-go-golang/index.html#mli ...

  9. xdoj-1243 (费马平方和问题）

    1243: CKJ老师爱数学 时间限制: 1 Sec  内存限制: 128 MB提交: 56  解决: 13[提交][状态][讨论版] 题目描述 众所周知,CKJ老师非常热爱数学,他对于方程组的有自己 ...

  10. ubuntu下配置环境

    https://blog.csdn.net/zzc15806/article/details/73662491