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. CodeForces ~ 996

    Allen has a LOT of money. He has nn dollars in the bank. For security reasons, he wants to withdraw ...

  2. Python 的基本运算及分析

    1题   输出1 2 3 4 5 6  8 9 10 . 方法一: count = 0while count < 10 : count += 1 if count == 7 : continue ...

  3. Flask源码阅读-第四篇(flask\app.py)

    flask.app该模块2000多行代码,主要完成应用的配置.初始化.蓝图注册.请求装饰器定义.应用的启动和监听,其中以下方法可以重点品读和关注 def setupmethod(f): @setupm ...

  4. python scrapy解码方法和时间格式转换

    import scrapy from datetime import datetime class BianSpider(scrapy.Spider): name = 'bian' # allowed ...

  5. Python 基于队列的进程通信

    from multiprocessing import Process,Queue def f1(q): q.put('约吗?') if __name__ == '__main__': q = Que ...

  6. Python基础6--函数、类和文件操作

    1 def name(para) def myabs(x): if x>0: return x else: return -x 2 lambda表达式 用于声明匿名函数,既没有名字的小函数 f ...

  7. Spring Boot 揭秘与实战（七） 实用技术篇 - Java Mail 发送邮件

    文章目录 1. Spring Boot 集成 Java Mail 2. 单元测试 3. 源代码 Spring 对 Java Mail 有很好的支持.因此,Spring Boot 也提供了自动配置的支持 ...

  8. A + B 问题

    要求: 问题:给出两个整数a和b, 求他们的和, 但不能使用 + 等数学运算符. 示例: 如果 a=1 并且 b=2,返回3 代码: package main import ( "fmt&q ...

  9. 【转载】 强化学习（四）用蒙特卡罗法（MC）求解

    原文地址: https://www.cnblogs.com/pinard/p/9492980.html ------------------------------------------------ ...

  10. Python网络爬虫之图片懒加载技术、selenium和PhantomJS

    引入 图片懒加载 selenium phantomJs 谷歌无头浏览器 知识点回顾 验证码处理流程 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.ch ...