zoukankan      html  css  js  c++  java
  • html5中的几种布局简单比较

    html中的布局主要由静态布局、自适应布局、流式布局以及响应式布局几类,简单比较以下这几种布局的区别和特点。
    
    一 静态布局(Static Layout)
    
    表现:在传统web设计中,不管浏览器尺寸具体大小多少,网页的布局会一直按照最开始的布局来显示。
    
    特点:固定死宽高。
    
    二 自适应布局(Adaptive Layout)
    
    表现:就是为了不同屏幕的分辨率来定义不同的布局,并且在每个布局中的页面元素不随着窗口的大小变化而改变。
    
    特点:自适应布局可以看做是静态布局的一个系列,即元素的位置随着网页大小发生变化而元素的大小不变。
    
    三 流式布局(Liquid Layout)
    
    表现:实质是百分比布局,只有一套布局,页面元素会随着窗口大小变化而改变。
    
    特点:当窗口变得过小或过大,页面元素就不能正常显示。
    
    1 百分比的特点
    
    尺寸百分比:如width = 20%;
    
    位置百分比:如left = 30%;
    
    2 单位
    
    1)em:参考点继承于父级字体大小
    
    例如:
    
    <div style = “font-size:14px;”>
        <div style = “font-size:2em”></div><!—字体继承父级为28px-->
    </div>
    2)rem;相对于(root根元素)html元素设置的字体大小
    
    确定rem的三个步骤:
    
    a:确定基数,一般为10px;
    
    b:html{font-size:百分数}
    
           基数 = 百分数*16
    
           如:百分数为62.5% 基数 = 62.5*16= 10px = 1rem
    
    c:将px换算成rem公式:px值/基数
    
           如:html的font-size =62.5%,则可以确定基数为10px,若给浏览器设置的字体为20px,换算成rem值为20/10 = 2rem。
    
    例如:
    
    <html style="font-size: 62.5%;">
        <body>
            <div style="font-size: 3rem;"></div><!--3rem=30px-->
    </body>
    </html>
    注意:谷歌浏览器下小于12px的字体会失效,则最终显示默认字体大小为12px,但是在火狐浏览器下能够正常显示;
    
    兼容性问题:IE6,7,8不支持em或rem,其他浏览器都支持。
    
    四 响应式布局
    
    表现:针对不同的屏幕分辨率设置不同的布局,同时每一种布局中用到流式布局,即页面大小会随着窗口大小的改变而自动适配,能使一个网站兼容多个终端。
    
    特点:响应式布局跟自适应布局原理一样,都是检测设备,根据设备不同分辨率来设置不同的CSS样式,并且样式里面都采用的是百分比,而不是自适应布局里面的固定宽高。
  • 相关阅读:
    《Maven实战》文字版[PDF]
    spring管理的类如何调用非spring管理的类
    从session中获取当前用户的工具类
    WebService,ESB笔记
    Activiti
    ElasticSearch最全分词器比较及使用方法
    [ElasticSearch]Java API 之 滚动搜索(Scroll API)
    从html富文本中提取纯文本
    Jetty启动报Error scanning entry META-INF/versions/9/org/apache/logging/log4j/util/ProcessIdUtil.class
    elasticsearch: 创建mapping
  • 原文地址:https://www.cnblogs.com/kangshuai/p/9644837.html
Copyright © 2011-2022 走看看