媒体查询配合rem使用（HTML+CSS学习笔记二十一）_rem的htmlcss媒体查询代码范文

结合媒体查询 -> 随着设备的改变 更改html font-size的值。

​

媒体查询确定范围？？

​

移动端设计图 ： 640px 750px 1080px;

dpr 2 2 3

范围 320px 375px

@media screen and (max-width:320px){
    html{
        font-size:12px;
    }
}
@media screen and (min-width:321px) and (max-width:375px){
    html{
        font-size:14px;
    }
}
@media screen and (min-width:376px){
    html{
        font-size:16px;
    }
}

实现流程

ui设计图   640px
​
dpr    2
​
ps量出height   88px;
​
88px / 2 ==  44px;
​
设计图640px    dpr  2
​
640px  /  2 == 320px
​
44px / 12px == rem

vw + rem

为了方便计算，可以把html的font-size值 设置成100px; 1rem == 100px;

100px是一个固定值，没办法随着设备的改变而改变。

能跟随设备发生改变

vw 根据视口大小进行改变。

100px == ?vw

根据设计图分配情况

• 第一种情况：
  如果UI设计图为 640px
  考虑的dpr 2
  适配的核心设备 320px;
  ​
  100vw == 320px
  1vw == 3.2px
  ?vw == 100px
  31.25vw == 100px
• 第二种情况
  如果设计图为750px
  考虑dpr 2
  适配的核心设备 375px
  100vw == 375px
  1vw == 3.75px
  ?vw == 100px
  26.67vw == 100px;

设置方法

如果设计图为 640px html设置{font-size:31.25vw}

如果设计图为 750px html设置{font-size:26.67vw}

计算流程

vw 结合 rem 计算流程

因为设计图 640px

所以html设置{font-size:31.25vw;}

ps中获取height 88px

dpr 2

88 / 2 == 44px

44 / 100 == 0.44rem;

flxible.js 插件

计算流程

1：引入flxible.js插件

2: 去掉html里面默认的meta标签

flxible.js原理

在页面中引入flexible.js后，flexible会在标签上增加一个data-dpr属性和font-size样式（如下图）。

写在最后

在结束之际，我想重申的是，学习并非如攀登险峻高峰，而是如滴水穿石般的持久累积。尤其当我们步入工作岗位之后，持之以恒的学习变得愈发不易，如同在茫茫大海中独自划舟，稍有松懈便可能被巨浪吞噬。然而，对于我们程序员而言，学习是生存之本，是我们在激烈市场竞争中立于不败之地的关键。一旦停止学习，我们便如同逆水行舟，不进则退，终将被时代的洪流所淘汰。因此，不断汲取新知识，不仅是对自己的提升，更是对自己的一份珍贵投资。让我们不断磨砺自己，与时代共同进步，书写属于我们的辉煌篇章。

需要完整版PDF学习资源私我

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以点击这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！