兼容类的面试题

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>