美文网首页
移动端css初始化

移动端css初始化

作者: web前端攻城狮 | 来源:发表于2019-05-03 14:20 被阅读0次

    html,
    body {
    user-select: none; //禁止用户长按
    font-family: 'PingFangSC-Light', 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', 'Arial', 'sans-serif';
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    /* 禁用iPhone中Safari的字号自动调整 /
    html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    /
    解决IOS默认滑动很卡的情况 */
    -webkit-overflow-scrolling: touch;
    }

    /* 禁止缩放表单 */
    input[type=“submit”],
    input[type=“reset”],
    input[type=“button”],
    input {
    resize: none;
    border: none;
    }

    /* 取消链接高亮 */
    body,
    div,
    ul,
    li,
    ol,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    input,
    textarea,
    select,
    p,
    dl,
    dt,
    dd,
    a,
    img,
    button,
    form,
    table,
    th,
    tr,
    td,
    tbody,
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    /* 设置HTML5元素为块 */
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
    display: block;
    }

    /* 图片自适应 */
    img {
    width: 100%;
    height: auto;
    width: auto\9; // ie8
    display: block;
    -ms-interpolation-mode: bicubic; //为了照顾ie图片缩放失真
    }

    /* 初始化 */
    body,
    div,
    ul,
    li,
    ol,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    input,
    textarea,
    select,
    p,
    dl,
    dt,
    dd,
    a,
    img,
    button,
    form,
    table,
    th,
    tr,
    td,
    tbody,
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
    margin: 0;
    padding: 0;
    }

    em,
    i {
    font-style: normal;
    }

    ul,
    li {
    list-style-type: none;
    }

    strong {
    font-weight: normal;
    }

    .clearfix:after {
    content: “”;
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
    }

    .clearfix {
    zoom: 1;
    }

    a {
    text-decoration: none;
    color: #969696;
    font-family: ‘Microsoft YaHei’, Tahoma, Arial, sans-serif;
    }

    a:hover {
    text-decoration: none;
    }

    ul,
    ol {
    list-style: none;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    font-size: 100%;
    }

    img {
    border: none;
    }

    /单行溢出/
    .one-txt-cut {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    }

    /多行溢出 手机端使用/
    .txt-cut {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    }

    /* 移动端点击a链接出现蓝色背景问题解决 */
    a:link,
    a:active,
    a:visited,
    a:hover {
    background: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    }

    相关文章

      网友评论

          本文标题:移动端css初始化

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