• 使用rem单位以及calc()方法在进行自适应布局非常强大


    在进行自适应布局的时候有时候会碰到需要有给固定宽高的地方,比如一个div宽度为屏幕尺寸的一半,但是有10px的padding,那在这种情况下假如我们直接给宽度50%,或者计算完之后的rem单位,再给padding,.因为盒模型的关系导致其宽度为50%+20px。但是又因为50%是一个不固定的值,导致很难计算出一个具体的值,在这种情况下我们就可以使用css3中的一个计算方法,calc(),可以设置

    div{calc(50% - 20px);}

    这样设置之后得到的结果就是计算之后的结果,任何需要给具体的值的地方都可以使用calc来进行计算,不过需要主要目前此方法只能进行+ - * /的四则运算,并且在计算符号前后都需要有一个空格。当然上面的50%也可以换成计算之后的rem单位。

    注意点:
    calc 内部的表达式,在使用运算符号时,两遍必须加上空格(虽然乘除可以无视,但还是建议带上)!!!!!,不然会解析错误!!,看演示写法

    calc(10 * 10px);
    calc(50% - 50px);
    calc(50% + 5em);
    calc(10% / 1rem);
    通过这些在方法在进行自适应布局的时候就可以更加的得心应手了~~
    结论
    使用rem单位以及calc()方法在进行自适应布局非常强大,可以配合媒介查询,可以非常灵活的控制各种元素的自适应。

    calc(100% - 20px);啥意思

    css3 的 calc()函数。这里的意思是设置宽度比100%的宽度少20px。

  • 相关阅读:
    比较Maven和Ant
    解决浏览器缓存
    Servlet--HttpServletResponse的2个操作流的方法
    Servlet--j2e中文乱码解决
    java乱码详解(java中byte与char的转换)
    linux中操作java进程
    Servlet--超链接,表单提交,重定向,转发4种情况的路径
    物理路径,相对路径,绝对路径以及根目录
    Servlet--转发和重定向
    Servlet--传参和接参
  • 原文地址:https://www.cnblogs.com/iqiao/p/12097476.html
Copyright © 2020-2023  润新知