CSS笔记 - 移动端适配

移动端适配与响应式设计

1. vw适配

• 移动端开发中，由于不同设备视口和像素比不同，所以不能单纯使用px作为单位，需要使用vw做适配

  vw表示的是视口的宽度，1vw = 1%视口宽度。假设设计图为750px，则1px = 0.1333333vw

• 实际开发中，会将html的font-size作为换算的介质，即font-size = 0.133333vw

  这样，当需要一个750px的样式时，就可以直接使用750rem表示

• 但由于字体的大小最低不能低于12px，所以一般会将值扩大40倍，即font-size = 5.133333vw

  所以最终需要一个750px的样式时，就使用(750/40)rem表示

2. 响应式设计

• 网页可以根据不同的设备或窗口大小呈现出不同的效果，使用响应式布局可以使一个网页适用于所有设备。需要使用媒体查询，为不同的设备或设备的不同状态来分别设计样式

• 媒体特性

  • width 视口的宽度
  • height 视口的高度
  • min-width 视口的最小宽度（视口大于指定宽度时生效）
  • max-width 视口的最大宽度（视口小于指定宽度时生效）

  @media (min-width:500px){
      body{
        background-color: #bfa;  
      }
  }
  
  /*
  	取交集使用 and 取并集使用 or
  	(min-width:500px) and (max-width:700px) 视口宽度大于500且小于700时生效
  	(min-width:700px) or (max-width:500px)  视口宽度大于700或小于500时生效
  */