移动端响应式(待更新)

72 阅读1分钟

安卓与Ios状态栏注意点

//safe-area-inset-left:安全区域距离左边边界距离 
//safe-area-inset-right:安全区域距离右边边界距离 
//safe-area-inset-top:安全区域距离顶部边界距离 
//safe-area-inset-bottom:安全区域距离底部边界距离
/** 兼容苹果顶部状态栏 */
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
// 兼容安卓底部或者顶部状态栏
  @statusHeightForAndroid: var(--status-bar-height);
// 设置状态栏高度,桥接后调用安卓方法返回
  document.documentElement.style.setProperty('--status-bar-height',xx+ "px")

css3媒体查询表

image.png