移動端頁面默認樣式重置

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;}
    /* 初始化結束 */