以后遇到的问题都记录在这⾥。
离子接地棒
1.由于先有的pc端后需求⼿机端,所以没有⽤框架做适配,⽽是⼿动媒体查询进⾏⼿机端、pad、pc 三端适配,界⾯⽐较简单,所以这么做也不复杂,就是坑⽐较多。碟形螺母
2.移动和pad我查的范围是1024px 到200px之间,⽤百分⽐+rem布局。4g手机电子围栏
3.⼩屏幕的适配是通过⼀层容器定位实现铺满全屏,但这样做有两个问题(1)底部链接和备案号位置的固定(2)软键盘弹出会不会挤压界⾯⼤⼩ ei硅钢片>聚乙二醇辛基苯基醚4.固定位置的元素我根据情况判断是否需要固定到底部(但我的这种做法不太科学)是由于我只进⾏了⼀层元素的定位固定。然后导致上述问题的出现。 5.解决:(1)固定的元素要针对上⼀级固定,⽤z-index排列显⽰顺序。(2)软键盘挤压界⾯,曲线救国的⽅法,window触发resize事件的时候,隐藏固定在底部的元素。
6.兼容性: 360安全浏览器6.2版本是IE7的内核,样式有变化,表现在阴影变的很⼤,input输⼊框光标位置不对,输⼊会出现⿊×,可见padding,margin这些没有⽣效,分析应该是盒模型差异导致的。 解决:<meta http-equiv="X-UA-Compatible" content="IE=edge"> 意思是强制使⽤最新版本的IE渲染。也试过8,9,但是回到IE浏览器就不⾏了。
结合input伪类 input::-ms-clear{ display:none;width:0;height:0} ::-ms-reveal{display: none;width:0;height:0;} 后边这个清除IE input的叹号。
7.华为某款⼤屏⼿机不⽀持transform:translateX(-50%)对于这个情况可以⽤margin-left:-50%;解决,这就要考虑元素的宽度了。
染料助剂8.overflow:hidden 属性在⼀些新⼿机上不⽀持,主要是 oppo r9splus + 锤⼦⼿机这些有IE⾏为,-ms 修复。