zoukankan      html  css  js  c++  java
  • 移动端适配的设置 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;
        }
    }
     
  • 相关阅读:
    WPF、UWP以及其他类型项目的csproj文件的迁移(SDK-Style)
    文书生成笔录预设保存按钮Mq中间转传服务
    卷宗添加争议焦点数据制造脚本(卷宗部分)
    案件信息同步之后,文书系统案件名称显示不正确问题
    DISTINCT----mysql移除返回的重复值
    Nginx系列教程(6)Nginx location 匹配规则详细解说
    转载 chrony 详解
    dmesg 时间转换
    axios---get和post用法详解
    通过递归来封装sessionStorage---set/get/delete
  • 原文地址:https://www.cnblogs.com/wuqilang/p/12337662.html
Copyright © 2011-2022 走看看