1.关于适配:

移动端适配可以使用lib-flexible（也可配合百分比宽度一起使用）十分适用于webapp适配

font-size默认为12px 以rem为单位。

关于lib-flexible详解：

注意：应用lib-flexible与响应式布局(媒介查询应用不同的样式)难以兼容，因为lib-flexible会改变媒体查询关键的width属性 使其不准确 参考

lib-flexible的问题研究：

.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的效果)：

/d/file/titlepic/5287309.html 有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,ur-scalable=0″ />）

viewport也可作为宽度单位，一些参数设定，width viewport 宽度(数值/device-width)，height viewport 高度(数值/device-height)，initial-scale 初始缩放比例，ur-scalable 是否允许用户缩放(yes/no)。

关于meta：/d/file/titlepic/5979300.html 注意：定义了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-width0;:padding:0 0；}

9.媒体查询：给不同屏幕大小的手机设置特殊样式

@mediaonlyscreenand(min-device-width:320px)and(max-device-width:375px){}

可用于图片适配查询devicepixelratio＝2，采用2x的背景图（background-size:contain）

高清屏及适配不同设备的方案总结：/d/file/titlepic/5977486.html style="font-family: 宋体">为盒子底部加上一条宽度为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-hi幼儿园中班教育笔记ght(没有特殊要求时设为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.阻止旋转屏幕时自动调整字体大小ht战役的近义词ml, body, form, fieldt, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

19.禁止用户选中文字

-webkit-ur-lect: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和lect），了解webkit对标签或input控件的渲染效果，内部的标签要活用不要只用div减少识别性和快捷性，关于文件放置相同功能模块的网页和css放在一个文件夹下面，index，login等跳转功能较多或模块的主体页面放在最外层，要写各种机型的兼容htc、三星等（腾讯gituht上有）