移动端开发css重置文件

最新推荐文章于 2023-01-06 08:51:12 发布

阿菜莱

最新推荐文章于 2023-01-06 08:51:12 发布

阅读量371

点赞数

分类专栏：移动端开发

本文链接：https://blog.csdn.net/Mertyu/article/details/103389113

版权

移动端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

@charset "utf-8";
/* 清零 */
*:focus {
    outline: none;
}

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

@media (min-width: 640px) {
    html {
        font-size: 170px;
    }
}

body {
    font-size: 0.12rem;
    font-family: 'Microsoft YaHei', Tahoma, Arial, "Roboto", "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "STHeiti", sans-serif;
}

/*去除iPhone中默认的input样式*/
input {
    -webkit-appearance: none;
    resize: none;
}

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

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

/*图片自适应*/
img {
    max-width: 100%;
    height: auto;
    width: auto \9; /*IE8*/
    -ms-interpolation-mode: bicubic; /*为了照顾IE图片缩放失真*/
    vertical-align: top;
}


em, i, strong {
    font-style: normal;
}

.clear-fix:after {
    content: "";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
}

.clear-fix {
    zoom: 1
}

a {
    text-decoration: none;
    color: #929292;
    font-family: 'Microsoft YaHei', Tahoma, Arial, "Roboto", "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "STHeiti", sans-serif;
}

a:hover {
    color: #929292;
    text-decoration: none;
}

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

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-family: 'Microsoft YaHei', Tahoma, Arial, "Roboto", "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "STHeiti", sans-serif;
}

fieldset, img {
    border: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption, th {
    text-align: left;
}

q:before, q:after {
    content: "";
}

/*禁止表单使用文本框输入法*/
input[type="password"] {
    ime-mode: disabled;
}

.scope {
    max-width: 640px;
    margin: 0 auto;
}

.clear {
    clear: both;
}

/*连续英文，数字换行*/
.wordwrap {
    word-break: break-all;
    word-wrap: break-word;
}

/*单行文字超出显示省略号*/
.omg {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

* {
    box-sizing: border-box;
}

/* 禁止长按链接与图片弹出菜单 */
a, img {
    -webkit-touch-callout: none;
}

/* 禁止选中文本（如无文本选中需求，此为必选项） */
html, body {
    -webkit-user-select: none;
    user-select: none;
}

viewport设置：

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <title></title>
</head>

阿菜莱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端开发css重置文件

@charset "utf-8";/* 清零 */*:focus { outline: none;}html { /*禁用iPhone中Safari的字号自动调整*/ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; /* 解决IOS默认滑动很卡的情况 */ -webk...
复制链接

扫一扫

专栏目录