zoukankan      html  css  js  c++  java
  • 移动端重置浏览器默认样式代码

    字体单位:rem

    @charset "utf-8";
    /*
        *create by chengkun 19/9/2015.
        *version 1.0.
        *Reset the browser default style.
    */
    /* 设置盒模型样式 */
    * {
        box-sizing: border-box;
    }
    article, aside, blockquote, body, button, code, dd, details, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, input, legend, li, menu, nav, ol, p, pre, section, td, textarea, th, ul {
        margin: 0;
        padding: 0;
    }
    article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
        display: block;
    }
    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;
    }
    /* 清除列表默认样式 */
    ul, ol, li {
        list-style: none;
    }
    em, i {
        font-style: normal;
    }
    html, body {
        color: #383838;
        background: #fff;
        min-width: 320px;
        max-width: 640px;
        margin: 0 auto;
    }
    body, input, textarea, select, button {
        font-family: "微软雅黑",Tahoma,sans-serif;
        -webkit-appearance: none;
        border-radius: 0;
    }
    a {
        color: #333;
        text-decoration: none;
        outline: none;
    }
    a, button, input, p, label, div {
        -webkit-tap-highlight-color: rgba(255,0,0,0);
    }
    img {
        border: 0;
        width: 100%;
        vertical-align: top;
    }
    input, textarea {
        border: none;
    }
    input:focus, textarea:focus {
        outline: none;
    }
    textarea {
        resize: none;
    }
    button {
        border: none;
        background: none;
    }
    address {
        font-style: normal;
    }
    /* 清除浮动 */
    .clearfix:after,.clearfix:before{
        content:"";
        display:table;
    }
    .clearfix:after{
        clear:both;
        overflow:hidden;
    }
    .clearfix{
        zoom:1;
    }
    /*浮动*/
    .fl {
        float: left;
    }
    
    .fr {
        float: right;
    }
    
    #wrap {
        min-width: 320px;
        max-width: 640px;
    }
    
    .disabled {
        background: #ccc;
        color: #fff;
    }
    
    /*遮罩层*/
    .thiv{
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.6);
        z-index: 100;
    }
    /* 公共提示框样式 */
    .tips {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    
    .tipscon {
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        padding: 15px;
        background-color: rgba(0, 0, 0, 0.8);
        border-radius: 5px;
        margin: 0 20px;
        overflow: hidden;
        opacity: 1;
        color: #FFF;
        font-size: 1.25rem;
        letter-spacing: 2px;
    }
    /* 适配文字大小,使得不同屏幕大小手机上的文字展示效果一致 */
    html{
        font-size: 12px;/* 根元素样式 */
        line-height: 18px;
    }
    @media (min-320px) {
        html {
            font-size: 85%;
        }
    }
     @media (min-360px) {
        html {
            font-size: 83%;
        }
    } 
    @media (min-375px) {
        html {
            font-size: 88%;
        }
    }
    @media (min-414px) {
        html {
            font-size: 93%;
        }
    }
    @media (min-480px) {
        html {
            font-size: 98%;
        }
    }
    @media (min-640px) {
        html {
            font-size: 105%;
        }
    }
    @media (min-768px) {
        html {
            font-size: 110%;
        }
    }
    @media (min-1080px) {
        html {
            font-size: 150%;
        }
    }
  • 相关阅读:
    qt 计时器自动刷新图片
    qt读取文本
    QLable 显示图片
    QButtonGroup 的使用
    Qt乱码的问题
    wpf 依赖强制回调
    实现Button的动态响应
    C# 闭包对像
    2020新年目标
    捕获、冒泡与阻止事件传播
  • 原文地址:https://www.cnblogs.com/chengkun101/p/4821887.html
Copyright © 2011-2022 走看看