Skip to content

响应式设计

尺寸依据

Web网页 - 设计尺寸

常见效果实现

源码收集

响应式单位

body {
    min-height: 100vh;
    /* some background property like a gradient */
}

// 固定比例 vmin 按最小边算
.aspect-4-3 {
  background-color: #e3e3e3;
  width: 100vmin;
  height: calc((3 / 4) * 100vmin); /* equals to 4:3 a.r. = height: 75vmin; */
}

Maintaining Aspect Ratio using viewport units - CSSFlexbox Sticky Footer Example

rem

rem的关键是等比缩放 用media为不同屏幕设置基准字体

流式布局致命缺点,宽度为百分比,高度为px写死,在大屏幕手机下会被拉宽。

固定宽度的缺点,大屏幕下两边留白,页面小、操作按钮小。

高效的做法

设置viewport进行等比缩放,天猫是320*1.3

z-index只应用在兄弟元素上。 static定位的元素z-index值是0,也就是常规流。

npm viewtorem

关于移动端适配,你必须要知道的

vw