前端开发中UI问题处理

前端开发中UI问题处理

A:  尽量减少fixed的用法和vh和vw的css计算，在魅族手机上不支持vh和vw 的计算，fixed的css在部分安卓手机上有不兼容的问题，可以使用 transform: translateZ(0)来避免会抖动的问题；

B:  一像素的边框问题，尽量是哟vant组件中自带的边框，可以解决安卓手机上一像素分布补均匀的情况，注：input的边框要使用div嵌套

C： 所有的页面都要统一设置字体的基础字体和基础family,

D:   input字体偏下的问题可以加上line-height:normal  解决；

E:  底部占位的不能用空的div，要给列表的容器加一个padding-bottom;

F: 要精确使用ui给的图，注意fixed的层级问题

G: 商品图片用背景图展示，长方形的图显示中间部分

  @include wh(180px, 180px);

  background-size: cover !important;

  background-position: center center !important;

H: 需要在本页面修改其他组件的样式，可以使用>>>或者/deep/来进行定义，避免污染其他组件

I:  需要分页加载的页面要对城防列表的容器进行高度的动态定位，除一下css之外，要用js单独计算高度

  height: auto;

  overflow-x: hidden;

  overflow-y: scroll;

  -webkit-overflow-scrolling: touch;

J: 针对iphoneX的适配，底部和顶部都要加高度；

  @supports (bottom: constant(safe-area-inset-bottom)) or

  (bottom: env(safe-area-inset-bottom)) {

    .goods-footers {

      padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

      padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */

      height: calc(98px + env(safe-area-inset-bottom));

      height: calc(98px + constant(safe-area-inset-bottom));

    }

  }   

K：有小图标和字同时存在的时候可以选择放图片替换字，避免安卓手机上字体偏上的问题

L：字体加粗用 font-weight: 500;或者Medium字体