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. python中的循环以及，continue和break的使用

    循环 目标 程序的三大流程 while 循环基本使用 break 和 continue while 循环嵌套 01. 程序的三大流程 在程序开发中,一共有三种流程方式: 顺序 —— 从上向下,顺序执行 ...

  2. poj1742（多重背包分解+01背包二进制优化）

    Description People in Silverland use coins.They have coins of value A1,A2,A3...An Silverland dollar. ...

  3. Ajax 以及 前端JSP页面如何查看数值

    $.ajax({ url: ctx + "/unit/rsdl/qyjy/getDljgCode", type: "post", success: functi ...

  4. <Spark><Spark Streaming>

    Overview Spark Streaming为用户提供了一套与batch jobs十分相似的API,以编写streaming应用 与Spark的基本概念RDDs类似,Spark Streaming ...

  5. Linux平台搭建-----C语言

    下面内容是新手上路,各位高手路过勿喷!因为我第一次发布,可能页面设置或者其他做的不好,还请见谅~该文章只是作为我学习C语言的笔记以及记录学习进程的. 零基础学习C语言---搭建Linux平台开发环境 ...

  6. 手机号的 AES/CBC/PKCS7Padding 加解密

    前言:接口中上次的手机号码和密码是传入的加密的,模拟自动化的时候也需要先对数据进行加密 1.各种语言实现 网上已经各种语言实现好的AES加密,可以点击查看:http://outofmemory.cn/ ...

  7. uniDAC 7.2.14直联sqlite存在问题

    用最新的uniDAC 7.2.14,设置Direct=True,直联sqlite数据库,发现Release状态下出错,Debug没有问题. 改成Direct=False,则没有问题. 警告!    各 ...

  8. [BUG]数据库日期格式, 到页面是毫秒值

    springboot 配置文件

  9. 【Python】unittest-2-断言

    Unittest中的断言 1.  python unintest单元测试框架提供了一整套内置的断言方法. (1)如果断言失败,则抛出一个AssertionError,并标识该测试为失败状态 (2)如果 ...

  10. 2.12 单选框和复选框（radiobox、checkbox）

    2.12 单选框和复选框(radiobox.checkbox) 本篇主要介绍单选框和复选框的操作一.认识单选框和复选框    1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是 ...