美文网首页
移动端开发reset.css

移动端开发reset.css

作者: 走啊丶去拯救世界 | 来源:发表于2019-04-29 18:12 被阅读0次

    压缩版

    @charset "utf-8";
    html {
        /*如果有溢出自动形成滚动条*/
        overflow-y: auto;
        /*不想让iPhone横坚屏切换的时候调节文字*/
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    
    html * { /*所有元素*/
        outline: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*去除移动端开发点击事件灰色背景如a标签*/
    }
    
    body,html{
        height: 100%;
    }
    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;
    }
    
    input,
    select,
    textarea {
        font-size: 100%;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    fieldset,
    img {
        border:0 none;
        width:auto\9;
        max-width:100%;
        vertical-align:top;
        height:auto;
    }
    img:not([src]), img[src=""] {
        opacity:0
    }
    
    address,
    caption,
    cite,
    code,
    dfn,
    em,
    th,
    var {
        font-style: normal;
        font-weight: 500;
    }
    
    ol,
    ul {
        list-style: none;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: 100%;
        font-weight: 500;
    }
    
    q:after,
    q:before {  /*在<q></q>标签之间的文字两头加上引号*/
        content: '';
    }
    
    a{
        text-decoration: none;
    }
    
    /*input*/
    button {
        border: none;
    }
    
    button,
    html input[type='button'],
    input[type='reset'],
    input[type='submit'] {
        -webkit-appearance: button;  /*渲染成button的风格*/
        text-transform: none;
        outline: none;
    }
    
    input::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
        color: #999;  /*输入框提示语的字体样式*/
    }
    
    input::-webkit-inner-spin-button {/*解决input的type="number"在部分手机端会出现一个小按钮*/
        -webkit-appearance: none;/*去除系统默认appearance的样式,常用于IOS下移除原生样式*/
    }
    
    input::-webkit-outer-spin-button {/*解决input的type="number"在部分手机端会出现一个小按钮*/
        -webkit-appearance: none;
    }
    
    textarea {
        vertical-align: top;
    }
    
    button,
    input {
        line-height: normal;
    }
    
    select {
        margin: 0;
        outline: 0;
    }
    
    input.fixAKeyboard:focus,
    textarea.fixAndroidKeyboard:focus {
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
        -webkit-user-modify: read-write-plaintext-only;
    }
    
    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px white inset !important;
    }
    
    button,
    input[type=button],
    input[type=checkbox],
    input[type=reset],
    input[type=submit],
    label {
        cursor: pointer;
        user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
    }
    
    input[type=submit] {
        -webkit-user-modify: read-plaintext-only;
        -moz-user-modify: read-plaintext-only;
        -ms-user-modify: read-plaintext-only;
        -o-user-modify: read-plaintext-only;
        user-modify: read-plaintext-only;
    }
    
    input[type='search']::-webkit-search-cancel-button,
    input[type='search']::-webkit-search-decoration {
        -webkit-appearance: none;
    }
    
    input[type='search'] {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        -webkit-appearance: textfield;
    }
    
    *,
    *:before,
    *:after {
        box-sizing: border-box; /*所有元素以border开始计算盒子大小*/
    }
    
    .clearfix:after,
    .clearfix:before {   /*清除浮动*/
        content: " ";
        display: table;
    }
    
    .clearfix:after {
        clear: both;
    }
    
    .fl {
        float: left;
    }
    
    .fr {
        float: right;
    }
    

    相关文章

      网友评论

          本文标题:移动端开发reset.css

          本文链接:https://www.haomeiwen.com/subject/ntsunqtx.html