一、特殊样式
css3盒子模型
代码语言：javascript复制box-sizing:border-box;
-webkit-box-sizing:border-boxx清除点击高亮，设置transparent 完成透明
代码语言：javascript复制-webkit-tap-highlight-color:transparent;取消ios里Button、Input上的默认样式
代码语言：javascript复制-webkit-appearance:none;禁用长按页面时的弹出菜单
通常当你在手机上长按图像 img ，会弹出选项 存储图像 或者 拷贝图像，若不想让用户这么操作，可以设置方法来禁止：
代码语言：javascript复制img, a {-webkit-touch-callout: none;}H5页面input type=’num’时去掉右边的上下箭头
代码语言：javascript复制/*谷歌*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
-webkit-appearance:none !important;
}
/*火狐*/
input[type="number"] {
-moz-appearance: textfield;
}二、功能代码片段
禁止文本缩放
当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止：
代码语言：javascript复制html {
-webkit-text-size-adjust: 100%;
}禁止选中内容
如果你不想用户可以选中页面中的内容，那么你可以禁掉
代码语言：javascript复制html {
-webkit-user-select: none;
user-select: none;
}
.xxx{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}body初始化样式
代码语言：javascript复制body{
width:100%;
min-width:320px;
max-width:750px;
margin:0 auto;
font-size:14px;
background:#fff;
line-height:1.5;
}动态获取html根字体大小
代码语言：javascript复制//注意为html添加id='htmlFt'
;(() => {
function autoResize() {
document.getElementById('htmlFt').style.fontSize =
(100 / 750) * window.innerWidth 'px'
}
autoResize()
window.onresize = function () {
autoResize()
}
})()样式初始化css： normalize.css – 官网下载 normalize.css – github
三、meta标签设置
适应移动端
代码语言：javascript复制不对网站进行缓存
代码语言：javascript复制多核浏览器,优先使用最新版本的IE 和 Chrome 内核
代码语言：javascript复制添加到主屏幕时隐藏地址栏和状态栏（即全屏）
当我们将一个网页添加到主屏幕时，会更希望它能有像 App 一样的表现，没有地址栏和状态栏全屏显示，代码如下：
代码语言：javascript复制该方案在 iOS 和 Android5.0 上都通用。
添加到主屏幕时设置系统顶栏颜色
当我们将一个网页添加到主屏幕时，还可以对系统显示手机信号、时间、电池的顶部状态栏 颜色进行设置，前提是开启了：
有了这个前提，你可以通过下面的方式来进行定义：
代码语言：javascript复制content只有3个固定值可选：default | black | black-translucent
- 如果设置为
default，状态栏将为正常的，即白色，网页从状态栏以下开始显示； - 如果设置为
black，状态栏将为黑色，网页从状态栏以下开始显示； - 如果设置为
black-translucent，状态栏将为灰色半透明，网页将充满整个屏幕，状态栏会盖在网页之上； 该设置只在 iOS 上有效。
遮罩层滚动问题
在有遮罩层的情况下，遮罩层下方的内容依然可以透过遮罩层滚动，因此要取消这种操作
代码语言：javascript复制(function(){
var scrollTop = 0;
// 显示弹出层
$('.open').click(()=>{
// 在弹出层显示之前，记录当前的滚动位置
scrollTop = getScrollTop();
$('.workflow-modal').fadeToggle()
$(".workflow-container").slideToggle()
// 把脱离文档流的body拉上去！否则页面会回到顶部！
document.body.style.top = -scrollTop "px";
stop()
})
//关闭遮罩层
$('.close').click(()=>{
$(".workflow-container").slideToggle()
$('.workflow-modal').fadeToggle()
move()
// 回到老地方
to(scrollTop);
})
/***禁止滑动***/
function stop() {
document.documentElement.style.position = 'fixed';
document.body.style.overflow = 'hidden'; //隐藏滚动条
}
/***取消滑动限制***/
function move() {
document.documentElement.style.position = 'static';
document.body.style.overflow = ''; //出现滚动条
}
/*遮罩层出现之前记录当前滚动位置*/
function getScrollTop() {
return document.body.scrollTop || document.documentElement.scrollTop;
}
/**遮罩层消失滚回到原来的位置**/
function to(scrollTop) {
document.body.scrollTop = document.documentElement.scrollTop = scrollTop;
}
})()
