移动端页面初始化 css和html的head中的设置

最新推荐文章于 2022-03-29 14:12:54 发布

蔡馨

最新推荐文章于 2022-03-29 14:12:54 发布

阅读量584

点赞数 1

分类专栏： web前端学习

本文链接：https://blog.csdn.net/weixin_42805130/article/details/87794246

版权

web前端学习专栏收录该内容

63 篇文章 1 订阅

订阅专栏

*, ::before, ::after{
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /*去除移动端点击产生的高亮状态*/
    -webkit-tap-highlight-color: transparent;
}

html{
    font-size: 10px;
    font-family: 'Microsoft Yahei', sans-serif;
    color: #000;
}

a{
    text-decoration: none;
    color: #666666;
}

ul,ol{
    list-style: none;
}

input{
    border: none;
    outline: none;
    /*针对iOS浏览器, 清除默认非扁平化分格*/
    -webkit-appearance: none;
}

.clearfix::before,
.clearfix::after{
    content: '';
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}

/*精灵图片的使用*/
[class^='icon-'],
[class*=' icon-']{
    background: url("../images/sprites.png") no-repeat;
    -webkit-background-size: 20rem 20rem;
    background-size: 20rem 20rem;
}

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0, maximum-scale=1,user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">