• 不同尺寸设计图 rem 断点数据记录


    320px宽的设计图

    @media screen and (min- 320px) {
        html {
            font-size: 100px;
        }
    }
     
    @media screen and (min- 360px) {
        html {
            font-size: 112.5px;
        }
    }
     
    @media screen and (min- 400px) {
        html {
            font-size: 125px;
        }
    }
     
    @media screen and (min- 440px) {
        html {
            font-size: 137.5px;
        }
    }
     
    @media screen and (min- 480px) {
        html {
            font-size: 150px;
        }
    }
     
    @media screen and (min- 640px) {
        html {
            font-size: 200px;
        }
    }
     
    html {
        font-size: 31.25vw;
    }

    640宽的设计图

    @media screen and (min-320px){html{font-size:50px;}
    }
    @media screen and (min-360px){html{font-size:56px;}
    }
    @media screen and (min-400px){html{font-size:63px;}
    }
    @media screen and (min-440px){html{font-size:69px;}
    }
    @media screen and (min-480px){html{font-size:75px;}
    }
    @media screen and (min-640px){html{font-size:100px;}
    }
    html{font-size:-webkit-calc(100vw/6.4);font-size:calc(100vw/6.4);}

    1080宽【莫名其妙的尺寸】

    @media screen and (min- 320px) {
        html {
            font-size: 30px;
        }
    }
     
    @media screen and (min- 360px) {
        html {
            font-size: 33px;
        }
    }
     
    @media screen and (min- 400px) {
        html {
            font-size: 37px;
        }
    }
     
    @media screen and (min- 440px) {
        html {
            font-size: 41px;
        }
    }
     
    @media screen and (min- 480px) {
        html {
            font-size: 44px;
        }
    }
    html {
    font-size: -webkit-calc(100vw/10.8);
    font-size: calc(100vw/10.8);
    }
    
    @media screen and (min- 640px) {
        html {
            font-size: 60px;
        }
    }

    1920px

    @media screen and (min-320px){html{font-size:16px;}
    }
    @media screen and (min-360px){html{font-size:18px;}
    }
    @media screen and (min-400px){html{font-size:20px;}
    }
    @media screen and (min-440px){html{font-size:22px;}
    }
    @media screen and (min-480px){html{font-size:25px;}
    }
    @media screen and (min-640px){html{font-size:33px;}
    }
    html{font-size:-webkit-calc(100vw/19.2);font-size:calc(100vw/19.2);}
  • 相关阅读:
    SQLyog MySQL GUI V11.33 密钥
    java获取这周的开始时间
    mysql 5.7 重置密码
    nginx 负载均衡的5中策略
    Git安装和上传项目
    ▶1.7 VMware虚拟机克隆
    ▶【SecKill】U1 项目框架搭建
    ▶【SecKill】秒杀系统
    ▶【SecKill】U4 JMeter压测
    ▶【SecKill】U5 页面优化技术
  • 原文地址:https://www.cnblogs.com/liyinSakura/p/5751788.html
Copyright © 2020-2023  润新知