移動端頁面預設樣式重設

標籤：add   bsp   alt   web   block   oat   預設   elements   spi   

移動端頁面預設樣式重設

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

移動端頁面預設樣式重設