做一个 pad 的登录浮层用到的东东

虽说是一个很小的东西,但是使用到的东西还真不少。
1. 首先你要在你的静态页面中指定 viewport 的东西,要不然,他是自己缩放的,你根本不知道它的大小。

<meta name="viewport" content="width=device-width,initial-scale=1" />

2. 占位文字(placeholder)的 css 定义

.sos-pad-login ::-webkit-input-placeholder { color:#d2d2d2;font-size:20px;}

3. 输入框 focus 的时候,黄色框的问题

.sos-pad-login .ipt:focus{color:#333;border:1px solid #b5b5b5; outline:none;}

4. 去掉 ios 设备上,输入框的圆角效果

.sos-pad-login input{border:1px solid #d2d2d2;width:391px;height:42px;padding-left:14px; line-height:42px;font-size:20px;-webkit-appearance:none; border-radius:0;}

5. 当然如果用到了图片的背景图片的话,那就考虑一下双倍图的问题吧

@media screen and (-webkit-device-pixel-ratio: 2){
	.sos-pad-login .btn-cls,
	.sos-pad-login .btn-rfsh{ background-image:url(../images/sos_login_icon_tw.png);background-size:34px 80px;}
	}

6. 对input type=”text” 定义行高,会导致 placeholder 无法垂直居中,所以就不要定高度了

input {line-height:auto}