• 前端自适应样式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 Arial,"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;
        }
    }
  • 相关阅读:
    perl学习笔记三
    linux下编译C/C++
    redis学习笔记——数据类型
    redis学习笔记二
    perl学习笔记二
    hadoop实战 -- 网站日志KPI指标分析
    Java反射与动态代理
    使用maven来管理您的java项目
    使用MapReduce实现一些经典的案例
    编译本地64位版本的hadoop-2.6.0
  • 原文地址:https://www.cnblogs.com/liuXiaoDi/p/12786664.html
Copyright © 2020-2023  润新知