移动端页面默认样式重置

Posted 2020-10-03 Viva_nan

移动端页面默认样式重置

1.-webkit-tap-highlight-color

-webkit-tap-highlight-color:rgba(0,0,0,0);//透明度设置为0，去掉点击链接和文本框对象时默认的灰色半透明覆盖层(ios)或者虚框(android)

-webkit-tap-highlight-color:rgba(255,0,0,0.5);   //利用此属性，设置touch时链接区域高亮为50%的透明红，只在ios上起作用。android上只要使用了此属性就表现为边框。在body上加此属性，这样就保证body的点击区域效果一致了

 

2.outline：none

(1)在pc端为a标签定义这个样式的目的是为了取消ie浏览器下点击a标签时出现的虚线。ie7及以下浏览器还不识别此属性，需要在a标签上添加hidefocus="true"

(2)input，textarea{outline:none}  取消chrome下默认的文本框聚焦样式

(3)在移动端是不起作用的，想要去除文本框的默认样式可以使用-webkit-appearance，聚焦时候默认样式的取消是-webkit-tap-highlight-color。看到一些移动端reset文件加了此属性，其实是多余。

 

3.-webkit-appearance

-webkit-appearance: none;//消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式 

不同type的input使用这个属性之后表现不一。text、button无样式，radio、checkbox直接消失

4.-webkit-user-select

-webkit-user-select: none; // 禁止页面文字选择 ，此属性不继承，一般加在body上规定整个body的文字都不会自动调整

5.-webkit-text-size-adjust

-webkit-text-size-adjust: none; //禁止文字自动调整大小(默认情况下旋转设备的时候文字大小会发生变化)，此属性也不继承，一般加在body上规定整个body的文字都不会自动调整 

6.-webkit-touch-callout

-webkit-touch-callout:none; // 禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加

7.-webkit-overflow-scrolling
-webkit-overflow-scrolling:touch;// 局部滚动(仅iOS 5以上支持) 

 

下面是自己最开始自学的时候用的 现在看有很多弊端 先留着

html,body{margin:0; padding:0; border:0; font-size:14px;}
body{background:#f5f5f3; font-family:\'微软雅黑\';box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; /* Safari */}
.mhome{padding:0; min-width:320px; max-width:640px; margin:0 auto;}
.viewport{ padding:0 20px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
div,p,ul,li,ol,dl,dt,dd,span,img,input,table,h1,h2,h3,h4,h5,h6{ margin:0; padding:0; border:0; list-style:none; list-style-type:none;}
i,em{font-style:normal;}
.fl{float:left;}
.fr{float:right;}
.ce{ margin:0 auto; text-align:center;}
.cl{clear:both;}
a{text-decoration:none;}
a:visited{text-decoration:none;}
/*=====================================================*/
.k1{ height:10px; widows:100%;}.k2{ height:16px; width:100%;}.k3{ height:30px; width:100%;}.k4{ height:40px; width:100%;}.k5{ height:60px; width:100%;}.k6{ height:5px; width:100%;}
/*======覆盖苹果手机input提交样式======*/
input[type="submit"],input[type="reset"],input[type="button"]{ -webkit-appearance:none;}
/*ios系统中元素被触摸时产生的半透明灰色遮罩去掉*/
a,button,input,textarea{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    /*-webkit-user-modify:read-write-plaintext-only; */
}
/*input type=number*/
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{-webkit-appearance:none !important;}/* chrome and safari */

下边是借鉴别人的先留着

@charset "utf-8";
html {
color:#000;
background:#fff;
overflow-y:scroll;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%
}
html * {
outline:0;
-webkit-text-size-adjust:none;
-webkit-tap-highlight-color:rgba(0,0,0,0)
}
html,body {
font-family:sans-serif
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
margin:0;
padding:0
}
input,select,textarea {
font-size:100%
}
table {
border-collapse:collapse;
border-spacing:0
}
fieldset,img {
border:0
}
abbr,acronym {
border:0;
font-variant:normal
}
del {
text-decoration:line-through
}
address,caption,cite,code,dfn,em,th,var {
font-style:normal;
font-weight:500
}
ol,ul {
list-style:none
}
caption,th {
text-align:left
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:500
}
q:before,q:after {
content:\'\'
}
sub,sup {
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline
}
sup {
top:-.5em
}
sub {
bottom:-.25em
}
a:hover {
text-decoration:underline
}
ins,a {
text-decoration:none
}

 移动端用rem适配设备，自己感觉有弊端

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = \'orientationchange\' in window ? \'orientationchange\' : \'resize\',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if(clientWidth>=750){
                docEl.style.fontSize = \'100px\';
            }else{
                docEl.style.fontSize = 100 * (clientWidth / 750) + \'px\';
            }
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener(\'DOMContentLoaded\', recalc, false);
})(document, window);

另一种

var html = document.getElementsByTagName("html")[0];
    function getFontSize(){
        var width=document.documentElement.clientWidth
        ||document.body.clientWidth+"px";
        var fontSize=(24/640)*width;
        if(width>640){
            fontSize =24;
            }
        return fontSize;
    }
    html.style.fontSize=getFontSize()+"px";
    window.onresize=function(){
        setTimeout(function(){
        html.style.fontSize=getFontSize()+"px";
        },100)
    }

 

html {-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}
    input[type="submit"],
    input[type="reset"],
    input[type="button"],
    input{-webkit-appearance:none; resize: none;}
    img {max-width: 100%;height: auto;width:auto\\9; /* ie8 */border: none;}
    /* 初始化开始*/
    *{margin:0; padding:0; border:none;box-sizing:border-box;}
    body{background-color:#fff;color:#666;font:.26rem/.4rem "Microsoft YaHei";}
    em,i,b{font-weight: normal;font-style: normal;}
    a{text-decoration:none; color:#969696;}
    a:hover{ text-decoration:none;}
    li{list-style:none;}
    h1, h2, h3, h4, h5, h6{ font-size:100%;font-weight: normal;}
    .clearfix:after{content:""; display:block; visibility:hidden; height:0; clear:both;}
    .clearfix{zoom:1;}
    .fl{float:left;}
    .fr{float:right;}
    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color:#ff806b;}
    input:-moz-placeholder, textarea:-moz-placeholder {color: #ff806b;}
    input::-moz-placeholder, textarea::-moz-placeholder {color: #ff806b;}
    input:-ms-input-placeholder, textarea:-ms-input-placeholder {color: #ff806b;}
    /* 初始化结束 */