一、特殊样式
css3盒子模型
box-sizing:border-box;
-webkit-box-sizing:border-boxx清除点击高亮，设置transparent 完成透明
-webkit-tap-highlight-color:transparent;取消ios里Button、Input上的默认样式
-webkit-appearance:none;禁用长按页面时的弹出菜单
通常当你在手机上长按图像 img ，会弹出选项 存储图像 或者 拷贝图像，若不想让用户这么操作，可以设置方法来禁止：
img, a {-webkit-touch-callout: none;}H5页面input type=’num’时去掉右边的上下箭头
/*谷歌*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{-webkit-appearance:none !important;
}
/*火狐*/
input[type="number"] {-moz-appearance: textfield;
}二、功能代码片段
禁止文本缩放
当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止：
html {-webkit-text-size-adjust: 100%;
}禁止选中内容
如果你不想用户可以选中页面中的内容，那么你可以禁掉
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初始化样式
body{width:100%;min-width:320px;max-width:750px;margin:0 auto;font-size:14px;background:#fff;line-height:1.5;
}动态获取html根字体大小
//注意为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标签设置
适应移动端
不对网站进行缓存
多核浏览器,优先使用最新版本的IE 和 Chrome 内核
添加到主屏幕时隐藏地址栏和状态栏(即全屏)
当我们将一个网页添加到主屏幕时，会更希望它能有像 App 一样的表现，没有地址栏和状态栏全屏显示，代码如下：
该方案在 iOS 和 Android5.0+ 上都通用。
添加到主屏幕时设置系统顶栏颜色
当我们将一个网页添加到主屏幕时，还可以对系统显示手机信号、时间、电池的顶部状态栏 颜色进行设置，前提是开启了：
有了这个前提，你可以通过下面的方式来进行定义：
content只有3个固定值可选：default | black | black-translucent
- 如果设置为
default，状态栏将为正常的，即白色，网页从状态栏以下开始显示； - 如果设置为
black，状态栏将为黑色，网页从状态栏以下开始显示； - 如果设置为
black-translucent，状态栏将为灰色半透明，网页将充满整个屏幕，状态栏会盖在网页之上；
该设置只在 iOS 上有效。
遮罩层滚动问题
在有遮罩层的情况下，遮罩层下方的内容依然可以透过遮罩层滚动，因此要取消这种操作
(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;}})()