zoukankan      html  css  js  c++  java
  • 移动端 常见适配方案

    一、流式布局(百分比布局)

    通过高度定死宽度百分比来适应不同的屏幕

    #1. 经典的流式布局

    1. 左侧固定,右侧自适应
    * {
        box-sizing: border-box;
    }
    
    .box {
        width: 100%;
        height: 700px;
        position: relative;
    }
            
    .right {
        width: 100%;
        height: 100%;
        background: red;
        padding-left: 200px;
    }
    
    .left {
        width: 200px;
        height: 100%;
        background: green;
        position: absolute;
    }
    
     
    1. 右侧固定左侧自适应
    * {
        box-sizing: border-box;
    }
    
    .box {
        width: 100%;
        height: 700px;
        position: relative;
    }
    
    .right {
        width: 200px;
        height: 100%;
        background: ref;
        position: absolute;
        right: 0;
        top: 0;
    }
    
    .left {
        width: 100%;
        height: 100%;
        padding-right: 200px;
        background: green;
    }
    
     
    1. 两侧固定,中间自适应(圣杯布局)
        参考以上两个案例,发挥自己聪明的小脑壳实现它吧!!!
    
     

    #2. 缺点

    对于大屏幕来说,用户体验并不是特别好,有些布局元素会显得很长

    解决方案: rem布局

    #二、响应式布局

    媒体查询是实现响应式布局的关键技术

    #1. 常见设备尺寸

    /* 超小设备(手机,小于 480px) */
    @media screen and (min-width:480px){ ... }
    
    /* 小型设备(平板电脑,768px 起) */
    @media screen and (min-width:768px) { ... } 
    
    /* 中型设备(台式电脑,992px 起) */
    @media screen and (min-width:992px){ ... }
    
    /* 大型设备(大台式电脑,1200px 起) */
    @media screen and (min-width:1200px){ ... }
    
     

    #2. 最小宽度 min-width

        @media screen and (min-width:480px){ ... }
    
     

    #3. 最大宽度 max-width

        @media screen and (max-width:1200px){ ... }
    
     

    #4. 多个媒体特性的使用:并且

        @media screen and (min-width:480px) and (max-width:992px){ ... }
    
     

    #5. not关键词的使用:除了

        @media not screen and (min-width:1200px){ ... }
    
    
     

    #6. only关键词的使用: 仅仅,一般用来排除不支持媒体查询的浏览器

        @media only screen and (min-width:480px){ ... }
  • 相关阅读:
    golang批量修改文件名
    golang执行带空格的cmd命令
    了解golang的可变参数(... parameters)
    ADB命令连接逍遥模拟器
    通达信如何批量导出自定义板块,以及定义常量
    通达信日K线图中取周K线指标值
    go读取通达信本地数据
    Python读取通达信本地数据
    Golang: 解析JSON数据之一
    MT【357】角度的对称性
  • 原文地址:https://www.cnblogs.com/yzy521/p/14132254.html
Copyright © 2011-2022 走看看