zoukankan      html  css  js  c++  java
  • 响应式设计:流式布局

      仅使用媒体查询来适应不同视口的固定宽度设计,只会从一组CSS 媒体查询规则突变到另一组,两者之间没有平滑渐变。我们需要将固定像素布局转换成灵活的百分比布局。这样才能让页面元素根据视口大小在一个又个媒体查询之间灵活伸缩修正样式。

    一、将网页从固定布局修改为百分比布局
      1、将固定像素宽度转换对应的百分比宽度

        需牢记的公式: 目标元素宽度 ÷ 上下文元素宽度 = 百分比宽度     注:要牢记上下文,百分比是相对上下文而言的
      2、用em替换px

      em的实际大小是相对于其上下文的字体大小而言。如果我们给<body>标签设置文字大小100%,给其他文字使用相对单位em,哪些文字就会受body上的初始声明影响。这样的好处在于,如果完成所有文字排版后,又要将页面文字统一放大一点,我们就可以修改body的文字大小,所有其他文字也会相应变化。

        公式: 目标元素尺寸 ÷ 上下文元素尺寸 = 百分比尺寸  现代浏览器默认字体大小16px,因此一开始给body标签应用下列任何一条规则所产生的效果都一样:font-size:100% ;font-size:16px; font-size:1em;  相对字体大小也是相对于上下文而言的,例如页面中有标签

    <h1>I am<span>coder</span></h1>

    修改相对单位后样式:

    h1{font-size : 4.3125em} /*69除以16*/
    h1  span{
                    line-height: 1.052631579em;    /*40除以69*/
                    font-size: .550724638em;          /*38除以69*/
                  }                    

      其中,<span>文字大小(38px)是相对于其父元素的文字大小(69px)而言。它的行高(40px)则是相对其本身文字大小(30px)而言

      

  • 相关阅读:
    【转载】Linux 内核启动时间分析
    hackbench
    c用户组函数
    c环境变量操作函数
    c网络接口套接字函数
    c信号处理函数
    c进程操作函数
    c文件内容操作函数
    c文件操作
    c数据结构和算法
  • 原文地址:https://www.cnblogs.com/hawthornn/p/5464462.html
Copyright © 2011-2022 走看看