史上最全的移动端reset

7 篇文章 0 订阅
6 篇文章 0 订阅
/*
* @Author: Marte
* @Date:   2017-10-27 11:02:27
* @Last Modified by:   zhengpan
* @Last Modified time: 2017-10-28 16:12:07
*/


body,
dl,
dd,
ul,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
input,
textarea,
p,
hr,
thead,
tbody,
html,
tfoot,
th,
td {
    margin: 0;
    padding: 0;
     /*清除移动端默认的点击高亮效果*/
    -webkit-tap-highlight-color:transparent;
     /*设置以边框开始计算宽度*/
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    // 禁止ios弹出各种操作窗口
    -webkit-touch-callout:none;
    // 禁止ios和android用户选中文字
    -webkit-user-select:none;
    // 清楚transition闪屏问题
    -webkit-transform-style:preserve-3d;
    //css3动画硬件加速
    -webkit-transform:translate3d(0, 0, 0);
    -moz-transform:translate3d(0, 0, 0);
    -ms-transform:translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    // 横向滚动条
    overflow-x:auto;
    // ios下的横向滚动条
    -webkit-overflow-scrolling:touch;
}


ul,
ol {
    list-style: none;
}


a {
    text-decoration: none;
}


html {
    // 阻止旋转屏幕自动调整文字大小
    -ms-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}


body {
    line-height: 1.5;
    font-size: 14px;
}


body,
button,
input,
select,
textarea {
    font-family: 'helvetica neue', tahoma, 'hiragino sans gb', stheiti, 'wenquanyi micro hei', \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, sans-serif;
    // 防止placeholder偏上
    line-height:normal;
}


b,
strong {
    font-weight: bold;
}


i,
em {
    font-style: normal;
}


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


table th,
table td {
    border: 1px solid #ddd;
    padding: 5px;
}


table th {
    font-weight: inherit;
    border-bottom-width: 2px;
    border-bottom-color: #ccc;
}


img {
    border: 0 none;
    width: auto\9;
    max-width: 100%;
    vertical-align: top;
    height: auto;
}


button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
}


button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}


button[disabled],
input[disabled] {
    cursor: default;
}


input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}


input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}


input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}


input:focus {
    outline: none;
}


select[size],
select[multiple],
select[size][multiple] {
    border: 1px solid #AAA;
    padding: 0;
}


article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}


audio,
canvas,
video,
progress {
    display: inline-block;
}


body {
    background: #fff;
}


input::-webkit-input-speech-button {
    display: none
}


button,
input,
textarea {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


//改变placeholder颜色
input::-webkit-input-placeholder {
    color: red;
}


//用户点击变色
input:focus::-webkit-input-placeholder {
    color: blue;
}


// 移动端IOS手机下清除输入框内阴影
input,
textarea {
    -webkit-appearance: none;
}
// 移动端让图片等比例缩小
    // <div class="parent">
    //      <img src=".png">
    // </div>
    //
    //
    //
    //
    // .parent{
    //  width:100px;
    //  height:100px;
    //  display: flex;
    //  align-items: center;
    //      img{
    //          width:100%;
    //          height:auto;
    //      }
    // }
    //
    //


    // 手机横屏
    @@media (orientation:landscape){
        img{
            width:auto;
            height:100%;
            amrgin: auto;
        }
    }






// <a href="tel:15602512356">打电话给:15602512356</a> 拨打电话
//
// <a href="sms:10010">发短信给: 10010</a>   发短信
//
// ios取消input在输入的时候英文首字母大写
// <input type="text" autocapitalize="none">
// ios下监听 span label不会出发
// 解决方案 添加css cursor: pointer;
//
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值