1.关于适配:
移动端适配可以使用lib-flexible（也可配合百分比宽度一起使用）十分适用于webapp适配
Font-size默认为12px 以rem为单位。
关于lib-flexible详解：http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
注意：应用lib-flexible与响应式布局(媒介查询应用不同的样式)难以兼容，因为lib-flexible会改变媒体查询关键的width属性 使其不准确 参考
lib-flexible的问题研究：https://www.cnblogs.com/lyzg/p/5117324.html
.container设置max-width: 640px；width: 100%;。应用lib-flexible时也可设置为固定宽度width:10rem;overflow: hidden;（二者都是将屏幕的width等分出来的单位，显示效果一般无二）
2.webapp的1px边框过粗问题（还没发现简单可靠的方案）
现在大部分手机的分辨率很高，一个css像素1px，可能相当于2个甚至3个物理分辨率像素
导致1px会比实际的粗（虽然使用lib-flexible，但在在安卓设备下，此问题依然存在）
解决方法(利用transform达到零点几px的效果)：
https://www.cnblogs.com/lunarorbitx/p/5287309.html
2.input 有placeholder情况下不要设置行高，否则会偏上
placeholder属性会使文本位置偏上时解决办法：line-height: （和input框的高度一样高）---pc端解决方法 line-height：normal ---移动端解决方法
3.为了更好的兼容，会使用完整的viewport设置（<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />）
viewport也可作为宽度单位，一些参数设定，width viewport 宽度(数值/device-width)，height viewport 高度(数值/device-height)，initial-scale 初始缩放比例，user-scalable 是否允许用户缩放(yes/no)。
关于meta：http://www.cnblogs.com/libin-1/p/5979300.html
- Display:flex;可以达到很好的布局效果，自适应效果不错 注意：定义了flex、align-items等 后 子元素magain 和 float属性受影响甚至失效
Flex弹性布局详解：https://www.cnblogs.com/nuannuan7362/p/5823381.html
5.有表单元素的地方一般需要外面加上form元素做父容器，并加上submit
6.在input框获得焦点时文字被清空用value 在input框输入文字时被清空用placeholder
7.当border对布局产生影响时（border会导致容器所占面积变大），可用属性box-sizing:border-box解决（border在元素内部了，不会在外面占空间）
8.webkit表单元素的默认外观怎么重置
.css{-webkit-appearance:none;}
清除input默认样式
.Input{border-color:transparent;outline:none;;border-width 0;:padding:0 0；}
9.媒体查询：给不同屏幕大小的手机设置特殊样式
@media only screen and (min-device-width : 320px) and (max-device-width : 375px){}
- 可用于图片适配查询devicePixelRatio＝2，采用2x的背景图（background-size:contain）
高清屏及适配不同设备的方案总结：https://www.cnblogs.com/sese/p/5977486.html
11.用aftet伪类和定位可以对盒子达到特殊的修饰效果
为盒子底部加上一条宽度为96%的边框
.div:after{
position: absolute;
bottom: 0;
left: 4%;
content: ‘‘;
display: block;
height: 1px;
width: 96%;
}
12.input::-webkit-input-placeholder{ color: #******;}//改变提示字体的颜色，不会改变用户输入字的颜色（pc端页面还要写兼容性）
13.font-family: ‘Microsoft YaHei‘,‘Cabin‘, ‘Arial‘, ‘STXihei‘, ‘华文细黑‘, ‘SimSun‘, ‘宋体‘, ‘Heiti‘, ‘黑体‘, ‘STSong‘;（默认微软雅黑，如果没有微软雅黑再用其它的字体，电脑端也是一样）
- 父元素如果有旋转属性或者scare放大缩小属性都会使得pisition:flex失灵变成pisition：absolute的效果
大神的解释：https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/
15.用p标签与高度相关时必需要设置line-hight(没有特殊要求时设为font-size的值)，因为p标签会默认行高为字体大小加上下留的空白高度（默认上下留白）
16.去除-webkit-的滚动条
#content::-webkit-scrollbar{ display：none; }
设置滚动条样式
/*滚动条宽度*/
#content::-webkit-scrollbar{ width:5px; }
/*滚动条滑块*/
#content::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.25); border-radius:3px; }
/*滚动条的整个背景*/
#content::-webkit-scrollbar-track-piece{ background:#eee; }
- text-align:justify规定如何对齐行文本进行对齐和分隔，对于长文本行内整齐效果好
注意（多行使用时当文字两端占满整行宽度时才有效.）
18.阻止旋转屏幕时自动调整字体大小html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
19.禁止用户选中文字
-webkit-user-select:none
20.flex布局兼容性问题(移动端兼容性较为良好)
Android ;2.3 开始就支持旧版本 display:-webkit-box;4.4 开始支持标准版本 display: flex;
IOS： 6.1 开始支持旧版本 display:-webkit-box;，7.1 开始支持标准版本display: flex;
- 移动端字体小于12px使用四周边框或者背景色块，可能出现安卓文字偏上bug问题，可以使用整体放大1倍再缩放scale，而且字体不要是奇数
不足：改用a标签（有链接跳转的地方）， 像最左、最右、居中此类有特点的位置要保证在任何情况下都能保持特点（比如居中用百分比定位，左右用flex布局属性、margin-最左用left、或者浮动）， 不要只考虑展示效果（也要为交互便捷考虑比如有两个地方应用input range和select）， 了解webkit对标签或input控件的渲染效果，内部的标签要活用不要只用div减少识别性和快捷性，关于文件放置相同功能模块的网页和css放在一个文件夹下面，index，login等跳转功能较多或模块的主体页面放在最外层，要写各种机型的兼容HTC、三星等（腾讯gituht上有）
原文地址：https://www.cnblogs.com/shineipangtuo/p/10277149.html