zoukankan      html  css  js  c++  java
  • 不同尺寸设计图 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);}
  • 相关阅读:
    以链表为载体学习C++(1)
    以链表为载体学习C++(2)
    20191304商苏赫Python程序设计实验一
    Python实验二 20191304商苏赫
    七大基本排序算法之插入排序
    七大基本排序算法之归并排序
    《富爸爸,穷爸爸》
    七大基本排序算法之冒泡排序
    七大基本排序算法之选择排序
    七大基本排序算法之希尔排序
  • 原文地址:https://www.cnblogs.com/liyinSakura/p/5751788.html
Copyright © 2011-2022 走看看