移动端登录页样式错乱_移动端页面默认样式重置

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.οnresize=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;}

/* 初始化结束 */