前端响应式尺寸设计

按照设计稿的尺寸进行尺寸动态计算, 可以通过vw相对单位进行设置.
假设设计稿的宽度是1920, 设计稿的元素宽度是18px.
在1920屏幕下, (18/19.2)vw = 0.9375vw = 0.9375*19.2 = 18px.
在768屏幕下, (18/19.2)vw = 0.9375vw = 0.9375*7.68 = 7.2px.
可以看到元素会根据屏幕宽度自适应为设计师想让用户看到的尺寸. 因为元素在1920的模板下使用18px, 相对来说在768的屏幕下尺寸就为7.2px.

1
2
3


div {
	width: calc( 18vw / 19.2 ); /* 前面数字单位为vw, 那么结果就是以vw做为单位. */
}

# 媒体查询

上面的效果虽然解决了尺寸自适应的问题, 但在某些情况下不够用, 因为在小屏幕下, 每个元素都对应缩小, 页面就会很紧凑, 可以通过媒体查询显示/隐藏/改变元素属性. 例如有一个视频列表页面, 列表每行展示5个视频, 可能在电脑端下没有问题, 但是自适应到移动端时, 会发现视频很紧凑, 手机宽度本身比较小, 强行塞下了5个视频封面, 会影响用户体验. 此时我们可以使用媒体查询, 分别设置在电脑端每行显示5个, 在平板每行显示3个, 在移动端每行显示1个, 这样做就非常优雅啦.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


div.video-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, 200px); /* 默认情况下展示5个 */

  @media screen and (max-width: 1200px) {
    grid-template-columns: repeat(3, 200px); /* 中小屏展示3个 */
  }

  @media screen and (max-width: 768px) {
    grid-template-columns: repeat(2, 200px); /* 更小屏展示2个 */
  }

  @media screen and (max-width: 400px) {
    grid-template-columns: 200px; /* 超小屏展示1个 */
  }

  > .video-card {
    width: 100%;
    aspect-ratio: 16/9; /* 固定宽高比 */
    background-color: aqua;
  }
}

# 其他

桌面设计稿尺寸1920*1080
移动端设计稿尺寸375*667

常用的尺寸:

ch	en	size
超小屏		≤400
更小屏	xs	＜768
小屏	sm	≥768px
中屏幕	md	≥992px
大屏	lg	≥1200px
更大屏	xl	≥1920px