css移动端通用样式 |css3画图

/* 为iOS和Android禁用用户选择 */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* 禁用文本缩放，防止iOS对某些元素自动缩放 */
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
/* 移动设备常用的1px边框效果（解决一些屏幕像素密度过高时，元素边框模糊的问题） */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2) {
.border-1px {
position: relative;
}
.border-1px:after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
border: 1px solid #ddd;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-box-sizing: border-box;
box-sizing: border-box;
pointer-events: none;
}
}
/* 移动设备常用的清除内外边距样式 */
* {
margin: 0;
padding: 0;
}
/* 防止表单元素获得焦点时出现的默认边框 */
input, textarea, select, button {
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* 移动设备中保留点击元素时的背景颜色 */
a, button, input, textarea {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
/* 移动设备中有时会出现图片被链接包裹的问题 */
a img {
border: none;
}

以上代码是基于移动设备上的通用CSS样式，它可以让你的网站更容易适配于不同的移动设备以及响应适配的需求。这些样式可以减少在开发过程中的一些常见问题，例如：1px边框模糊、一些默认样式等等，也可以使你的开发更为高效。