响应式布局的两种方式

媒体查询

/*
@media screen and (条件){
    html{
        font-siz:值px
    }
}
*/
/*
实现rem的适配
设计图是 750
需要适配的设备：750 720 540 480 424 414 400 384 375 360 320
 定义函数
 */
@media screen and (min-width:320px){
     html{
         font-size: 21.33333px/* 320/50 */
     }
 }
 @media screen and (min-width:360px){
    html{
        font-size: 24px/* 360/50 */
    }
}
@media screen and (min-width:384px){
    html{
        font-size: 25.6px/* 384/50 */
    }
}
@media screen and (min-width:400px){
    html{
        font-size: 26.6666px/* 400/50 */
    }
}
@media screen and (min-width:424px){
    html{
        font-size: 28.26666px/* 4240/50 */
    }
}
@media screen and (min-width:480px){
    html{
        font-size: 32px/* 480/50 */
    }
}
@media screen and (min-width:540px){
    html{
        font-size: 36px/* 540/50 */
    }
}
@media screen and (min-width:720px){
    html{
        font-size: 48px/* 720/50 */
    }
}
@media screen and (min-width:750px){
    html{
        font-size: 50px
    }
}

注意: 媒体查询仅仅是一个css使用的限制条件,并不会增加css的权重

利用jquery的resize事件

/* 
  适配rem
  rem的设计图  750px
  主要需要订好设计图上  1rem等于多少px

  750 / 15     1rem = 50px    需要设计图的宽度750   html的fontSize: 50px
*/
$(window).resize(function() {
  // console.log(111)
  // 获取屏幕的宽度
  let width = $(window).width()
  // if (width > 750) {
  //   width = 750
  // }
  // if (window < 320) {
  //   width = 320
  // }
  width = Math.max(width, 320)
  width = Math.min(width, 750)
  let fontSize = width / 15

  // 设计图的大小 / 50px   = 屏幕的大小 / 当前屏的fontSize
  $('html').css('fontSize', fontSize.toFixed(2) + 'px')
})

// 页面一加载，就触发resize事件
$(window).resize()