• 移动端适配的设置 root fontsize


    猫眼电影、天天:

     1、安装cssrem插件

        2、设置--->搜索cssrem--->
            Fixed Digits 改为2    px转rem小数点最大长度,默认:6
            Root Font Size 改为 50  根字体大小,默认是16px,即1rem = 16px,可自定义    修改完要重启vscode,此时输入50.5px会转换为1.01rem

        3、index.html中引入reset.css:
    @charset "utf-8";
    
    /* CSS Document */
    html,
    body,
    ul,
    li,
    ol,
    dl,
    dd,
    dt,
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    form,
    fieldset,
    legend,
    img {
        margin: 0;
        padding: 0;
    }
    
    fieldset,
    c {
        border: none;
    }
    
    img {
        display: block;
    }
    
    address,
    caption,
    cite,
    code,
    dfn,
    th,
    var {
        font-style: normal;
        font-weight: normal;
    }
    
    ul,
    ol,
    li {
        list-style: none;
    }
    
    body {
        color: #333;
        font: 12px PingFang SC, microsoft yahei, sans-serif;
        background: #fff;
    }
    
    a {
        color: #fff;
        text-decoration: none;
    }
    
    /*清除浮动*/
    .clear {
        clear: both
    }
    
    * {
        box-sizing: border-box
    }
    
    .border-1px::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 200%;
        height: 200%;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: left top;
        transform-origin: left top;
        pointer-events: none;
    }
    
    
    body,
    html,
    #app {
        height: 100%;
        background: #f5f5f5;
    }
    
    
    
    
    
    
    @media (min- 240px) {
        html {
            font-size: 32px;
        }
    }
    
    @media (min- 320px) {
        html {
            font-size: 42.66667px;
        }
    }
    
    @media (min- 360px) {
        html {
            font-size: 48px;
        }
    }
    
    @media (min- 375px) {
        html {
            font-size: 50px;
        }
    }
    
    @media (min- 384px) {
        html {
            font-size: 51.2px;
        }
    }
    
    @media (min- 411px) {
        html {
            font-size: 54.8px;
        }
    }
    
    @media (min- 414px) {
        html {
            font-size: 55.2px;
        }
    }
    
    @media (min- 424px) {
        html {
            font-size: 56.53333px;
        }
    }
    
    @media (min- 480px) {
        html {
            font-size: 64px;
        }
    }
    
    @media (min- 540px) {
        html {
            font-size: 72px;
        }
    }
    
    @media (min- 640px) {
        html {
            font-size: 85.33333px;
        }
    }
    
    @media (min- 720px) {
        html {
            font-size: 96px;
        }
    }
    
    @media (min- 750px) {
        html {
            font-size: 100px;
        }
    }
    
    @media (min- 768px) {
        html {
            font-size: 102.4px;
        }
    }
    
    @media (min- 800px) {
        html {
            font-size: 106.66667px;
        }
    }
    
    @media (min- 980px) {
        html {
            font-size: 130.66667px;
        }
    }
    
    @media (min- 1024px) {
        html {
            font-size: 136.53333px;
        }
    }
    
    @media (min- 1080px) {
        html {
            font-size: 144px;
        }
    }
    
    @media (min- 1152px) {
        html {
            font-size: 153.6px;
        }
    }
    
    @media (min- 1366px) {
        html {
            font-size: 182.13333px;
        }
    }
    
    @media (min- 1440px) {
        html {
            font-size: 192px;
        }
    }
    
    @media (min- 2160px) {
        html {
            font-size: 288px;
        }
    }
     
  • 相关阅读:
    PCLVisualizer可视化类
    【Leetcode】课程表(拓扑排序)
    不是充许的静态以太网地址,它与vmware保留的mac地址冲突
    vmware虚拟机linux添加硬盘后先分区再格式化操作方法
    卸载mysql时,提示libmysqlclient.so.16()(64bit) is needed by (installed) postfix
    创建mysql数据库,在新数据库中创建表,再尝试删除表
    忘记linux下的mysql密码,需要重新创建密码123456
    创建mysql表
    程序员的冷笑话 python版本
    python的__mro__与__slot__
  • 原文地址:https://www.cnblogs.com/wuqilang/p/12337662.html
Copyright © 2020-2023  润新知