前端H5项目问题总结

前端H5项目问题总结

一、img 图片 并排放置时，会出现空白间隙

解决方法：

1、将图片转换为块级对象 img{display:block;}

2、设置图片的垂直对齐方式 img{vertiacl-align:top;}

3、改变父对象的属性 (overflow:hidden;)

4、取消图片标签和其父对象的最后一个结束标签之间的空格

二、二级列表页面

1、样式最好一致，方便后台 循环上传

三、手机端 fixed 失效

1、body{overflow:hidden;position:relative;}

2、.fixed定位到底部，

3、.wrap 让这个模块 滚动

四、二级栏目 写成灵活的  

1、根据字数撑起宽高

五、Rem 使用rem 时，

1、详情页 字体大小设置在外层

六、详情页 text-indent 不建议写，用空格 代替

1、text-indent 不建议写，用 空格  代替，防止后台详情页 出现 左侧空白

七、移动端 hover效果取消

1、body,html{-webkit-tap-highlight-color:transparent;}

八、百度地图api 小图标 与 img{max-width:100%;} 冲突

#map img{max-width:none;}

九、全屏视频 不播放，可以设置 video  muted静音

video{object-fit: cover;}视频 全屏

十、border-radius  在mac 系统出现 短暂失效，设置border-radius的同时设置 transform:rotate(0deg);