1. 如何关闭IOS键盘首字母自动大写
/* 添加autocapitalize即可 */
<input type="text" autocapitalize='off'>2. 如何让Chrome支持小于12px的文字
/* Chrome浏览器默认文字大小是16px */
/* Chrome 中文版浏览器会默认设定页面的最小字号是12px，英文版没有限制，原由 Chrome 团队认为汉字小于12px就会增加识别难度 */
<style type="text/css">
.span1{
font-size: 12px;
display: inline-block; // 将span元素转为行内块元素
-webkit-transform:scale(0.8); // scale属性只对可以定义宽高的元素生效
}
.span2{
display: inline-block;
font-size: 12px;
}
</style>
<body>
<span class="span1">早上好10px</span>
<span class="span2">下午好12px</span>
</body>3. rem和em的区别（一般用于移动端布局，因为移动端布局要考虑到适配的问题）
em针对于父元素的font-size
rem针对于根（html）元素的font-size
<style>
.box1{
font-size: 20px;
}
.box2{
width: 3em; // 此时它的宽度就是20px*3=60px
}
.box3{
width: 2rem; // 此时它的宽度就是16px*2=32px（谷歌浏览器默认字体是16px）
}
</style>
<body>
<div class="box1">
这是111111
<div class="box2">
这是22222
<div class='box3'>这是3333</div>
</div>
</div>
</body>
/* 如果把根html的字体大小换一下,换成20 */
<style>
html{
font-size: 20px;
}
.box1{
font-size: 20px;
}
.box2{
width: 3em; // 此时它的宽度就是20px*3=60px
}
.box3{
width: 2rem; // 此时它的宽度就是20px*2=40px
}
</style>
<body>
<div class="box1">
这是111111
<div class="box2">
这是22222
<div class='box3'>这是3333</div>
</div>
</div>
</body>4. IOS系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
<style>
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style>
<body>
<button>按钮</button>
</body>5. 修改webkit表单输入框placeholder的颜色值
<style>
input::-webkit-input-placeholder{
color: red;
}
</style>
<body>
<input type="" name="" placeholder="默认值">
</body>6. 禁止IOS长按时触发系统的菜单
<style>
html,body{
touch-callout: none;
-webkit-touch-callout: none;
}
</style>
<body>
<a href="http:xxxxx">a链接</a>
</body>7. 禁止ios和android用户长按选中文字或者长按下载图片
<style>
html,body{
user-select: none;
-webkit-user-select: none;
}
</style>
<body>
<a href="http:xxxxx">a链接</a>
<img src="xxx" />
</body>8. 自适应
方法：淘宝无限适配 + 布局单位使用rem
/* 引入淘宝无限适配（主要用于移动端） */
<head>
<style>
.container{
width: 1rem;
height: 1rem;
background: red;
}
</style>
<script type="text/javascript" src="flexible.js"></script>
</head>
<body>
<div class="container">11111</div>
</body>
假如知道设计稿上，这块内容是20px，那我们怎么知道它是多少rem呢？（有插件）