媒体查询适配

亮学长

已于 2023-11-22 14:09:09 修改

阅读量322

点赞数

分类专栏： JS相关文章文章标签：前端 javascript html

于 2019-10-03 17:50:03 首次发布

本文链接：https://blog.csdn.net/formylovetm/article/details/102006377

版权

JS相关文章专栏收录该内容

64 篇文章 1 订阅

订阅专栏

媒体查询

换算公式 默认标准设计稿为750px  下面是if 跟 else if 和 else的关系 
deviceWidth<=320px,设置deviceWidth=320px 320/750*100px = 320/750*100/320*100 vw = 13.333334vw
deviceWidth<=360px,设置deviceWidth=360px 360/750*100px = 360/750*100/360*100 vw = 13.333334vw
deviceWidth<=375px,设置deviceWidth=375px 375/750*100px = 375/750*100/375*100 vw = 13.333334vw
deviceWidth<=393px,设置deviceWidth=393px 393/750*100px = 393/750*100/393*100 vw = 13.333334vw
deviceWidth<=412px,设置deviceWidth=412px 412/750*100px = 412/750*100/412*100 vw = 13.333334vw
deviceWidth<=414px,设置deviceWidth=414px 414/750*100px = 414/750*100/414*100 vw = 13.333334vw
deviceWidth<=480px,设置deviceWidth=480px 480/750*100px = 480/750*100/480*100 vw = 13.333334vw
deviceWidth<=540px,设置deviceWidth=540px 540/750*100px = 540/750*100/540*100 vw = 13.333334vw
deviceWidth<=640px,设置deviceWidth=640px 640/750*100px = 640/750*100/640*100 vw = 13.333334vw
deviceWidth<=720px,设置deviceWidth=720px 720/750*100px = 720/750*100/720*100 vw = 13.333334vw
deviceWidth<=768px,设置deviceWidth=768px 768/750*100px = 768/750*100/768*100 vw = 13.333334vw
deviceWidth>=769px,设置deviceWidth=769px 769/750*100px = 769/750*100/769*100 vw = 13.333334vw

如果 一张照片宽度为120px 则换算为单位为rem为   120*100/deviceWidth/13.333334 rem
验证 （120*100/375/13.333334 rem） * （13.333334vw） * (375/100)   = 120px

120px 在750px的设计稿上显示

  /**
 * view-port list:
	320x480
	320x568
	320x570
	360x592
	360x598
	360x604
	360x640
	360x720
	375x667
	375x812
	393x699
	412x732
	414x736
	480x854 
	540x960
	640x360
	720x1184
	720x1280
	800x600
	1024x768
	1080x1812
	1080x1920
 */
html {
  /* font-size: -webkit-calc(13.33333333vw); */
  /* font-size: calc(13.33333333vw); */
}
@media screen and (max-width: 320px) {                                   
  html {
    font-size: 42.667px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 321px) and (max-width: 360px) {
  html {
    font-size: 48px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 361px) and (max-width: 375px) {
  html {
    font-size: 50px;
    /* font-size: -webkit-calc(13.33333333vw); */
    /* font-size: calc(13.33333333vw); */
  }
}
@media screen and (min-width: 376px) and (max-width: 393px) {
  html {
    font-size: 52.4px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 394px) and (max-width: 412px) {
  html {
    font-size: 54.93px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 413px) and (max-width: 414px) {
  html {
    font-size: 55.2px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 415px) and (max-width: 480px) {
  html {
    font-size: 64px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 481px) and (max-width: 540px) {
  html {
    font-size: 72px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 541px) and (max-width: 640px) {
  html {
    font-size: 85.33px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 641px) and (max-width: 720px) {
  html {
    font-size: 96px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 721px) and (max-width: 768px) {
  html {
    font-size: 102.4px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}
@media screen and (min-width: 769px) {
  html {
    font-size: 102.4px;
    font-size: -webkit-calc(13.33333333vw);
    font-size: calc(13.33333333vw);
  }
}