移动端常用样式汇总
去除ios 按钮按下的默认高亮效果
-webkit-tap-highlight-color : none;
ios 触摸并按住触摸目标时候，禁止或显示系统默认菜单
-webkit-touch-callout： none;
文本不能被选择; 但是input textarea在ios不能被聚焦,属性要设置成text
user-select: none;
input{
user-select: text;
}
去除系统默认appearance的样式,常用于IOS下移除原生样式
-webkit-appearance: none;
input placeholder样式
::-webkit-input-placeholder {
color: #ccc;
}
移动端rem和px换算关系 html的font-size:100px p font-size:0.12rem是12px
100/px=0.rem 100/14px=0.14rem
html {
font-size: 100px;
}
body {
font-size: 0.12rem;
}
p {
font-size: 0.14rem;
}
.main {
width: 3rem;
background-color: #eee;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>wap°æ±¾</title>
</head>
<style>
img {
max-width: 100%;
}
a {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
}
</style>
网友评论