Mobile page Default Style reset

Mobile page Default Style reset

1.-webkit-tap-highlight-color

-webkit-tap-highlight-color:rgba (0,0,0,0);//transparency set to 0, remove the default gray translucent overlay (IOS) or Virtual box (Android) when clicking Links and text box objects

-webkit-tap-highlight-color:rgba (255,0,0,0.5); Use this property to set the transparent red of the link area to 50% when touch is highlighted, only works on iOS. As long as this property is used on Android, it behaves as a border. Add this property on the body to ensure that the body's hit area is consistent

2.outline:none

(1) The purpose of defining this style on the PC side for a tag is to cancel the dashed line that appears when you click the a tag in IE. IE7 and the following browsers do not recognize this property and need to add hidefocus= "true" on the A label

(2) Input,textarea{outline:none} uncheck the default text box focus style under chrome

(3) on the mobile side is not working, want to remove the text box default style can use-webkit-appearance, focus when the default style of cancellation is-webkit-tap-highlight-color. It is superfluous to see some of the mobile reset files added with this attribute.

3.-webkit-appearance

-webkit-appearance:none;//eliminate the native appearance of input boxes and buttons, add this property on iOS to customize styles for buttons and input boxes

Input of different type uses this attribute to behave differently. Text, button no style, radio, checkbox disappears directly

4.-webkit-user-select

-webkit-user-select:none; Prohibit page text selection, this property does not inherit, generally added to the body of the text will not automatically adjust the body 5.-webkit-text-size-adjust-webkit-text-size-adjust:none; Prohibit text automatic resizing (by default, the text size changes when rotating the device), this property does not inherit, generally added to the body of the text will not automatically adjust the body 6.-webkit-touch-callout-webkit-touch-callout:none; Disable the pop-up menu (active under iOS) when long press the page, and the IMG and a tags are 7.-webkit-overflow-scrolling
-webkit-overflow-scrolling:touch;//partial scrolling (supported only on iOS 5) The following is the first time I started self-study with a lot of disadvantages to keep it.

html,body{margin:0; padding:0; border:0; font-size:14px;} Body{background: #f5f5f3; font-family: ' Microsoft Jas Black '; 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%;} /*====== Overlay Apple Phone input submission style ======*/input[type= "submit"],input[type= "reset"],input[type= "button"]{-webkit-appearance:none;}    */a,button,input,textarea{-webkit-tap-highlight-color:rgba (0,0,0,0) is removed from the translucent gray matte that is generated when the element is touched in the/*ios system; /*-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 */

The bottom is to draw on others to keep the first

@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
}

Mobile-equipped with REM-fit devices, feeling a disadvantage

(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 = * (clientwidth/750) + ' px ';            }        };    if (!doc.addeventlistener) return;    Win.addeventlistener (Resizeevt, Recalc, false);    Doc.addeventlistener (' domcontentloaded ', Recalc, False);}) (document, window);

Another kind

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";        }, )    }

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;}    /* Initialize start */*{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;} /* Initialization End */

Mobile page Default style reset