zoukankan      html  css  js  c++  java
  • 流式布局和响应式布局

    流式布局(百分比布局)

    • 在CSS2时代就有,主要指的是将页面中元素的宽度以百分比表示并进行排版,可以在不同分辨率下显示相同的版式

    响应式布局

    • 关键技术是CSS3中的媒体查询,可以在不同分辨率下对元素重新设置样式(不只是尺寸),在不同屏幕下可以显示不同版式

      举例:

    • 可以实现不同尺寸屏幕下对不同元素的显示与隐藏
    @media screen and (min- 769px) and (max- 979px) {
      .w {
         750px;
      }
      .top_nav ul li:first-child {
        display: none;
      }
      .nav ul li:last-child {
        display: none;
      }
      .bottom_cards .cards .item {
         49%;
      }
      .bottom_cards .cards:after {
        display: none;
      }
    }
    
    • 可以实现不同尺寸屏幕下的元素尺寸适配
    /* 
    设计图宽度为640px,
    计算font-size的方法为: 要适配的屏幕尺寸/设计图尺寸*默认下的文字大小
    即: 320/640*32 = 16(px)
    */
    @media only screen and ( 320px) {
      html {
        font-size: 16px;
      }
    }
    /* 即: 360/640*32 = 18(px) */
    @media only screen and ( 360px) {
      html {
        font-size: 18px;
      }
    }
    /* 即: 375/640*32 = 18.75(px) */
    @media only screen and ( 375px) {
      html {
        font-size: 18.75px;
      }
    }
    /* 即: 414/640*32 = 20.7(px) */
    @media only screen and ( 414px) {
      html {
        font-size: 20.7px;
      }
    }
    

      

  • 相关阅读:
    PhoneGap 数据库操作
    eclipse打开html文件
    Android 播放音频
    本地搭建 Apache 服务器
    C# CSV 导出
    .NET中使用MySQL数据库
    搭建一个phonegap环境,用eclipse+phonegap
    js test()
    Dom指针函数
    Js 禁用输入法 imemode 全角转换成半角
  • 原文地址:https://www.cnblogs.com/belongs-to-qinghua/p/11352688.html
Copyright © 2011-2022 走看看