关于rem vw 和 媒体查询用在一起的问题

关于rem vw 和媒体查询用在一起的问题

@media only screen and (min-height: 30rem) {
  .item {
    background-color: yellow !important;
  }
}
@media only screen and (min-height: 50rem) {
  .item {
    background-color: red !important;
  }
}
@media only screen and (min-height: 80rem) {
  .item {
    background-color: blue !important;
  }
}

以上代码
1 设置样式表 html{ font-size: 1vw; }; 表现为媒体查询1rem=16px
2 设置通过js动态修改 html{ font-size: window.innerWidth / 100 + 'px' }; 表现为媒体查询1rem= 16px
3 直接在html标签上写style="font-size: 1vw;" 表现为媒体查询1rem=16px

问题上面代码中 1rem到底是多少

阅读 2.4k

rem是一个相对单位，它的基值是HTML标签的font-size值，也就是说，html的font-size 是多少，1rem就等于多少。浏览器默认的字体大小是16px，所以默认的1rem=16px。
我们可以根据设备宽度动态设置根元素的font-size，使得以rem为单位的元素在不同终端上以相对一致的视觉效果呈现。事实上 rem是把屏幕等分成指定的份数，以20份为例，每份为 1rem ， 1rem 对应的大小就是 rem基准值，rem做的就是把 rem基准值给<html>的 font-size ，所以如果设备的物理像素宽为 640px ，分成20份，那么 1rem=640px/20=32px，分成20代码如下：

//这段代码放在head标签里面
(function () {
    var html = document.documentElement;
 
    function onWindowResize() {
        html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px';
    }
 
    window.addEventListener('resize', onWindowResize);
    onWindowResize();
})();

当然，你也可以分成30份，40份，60份等等，这个看自己的喜好了

关于rem vw 和媒体查询用在一起的问题

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

前端代码更新如何通知用户刷新页面？

css布局怎么保证右边一直在可视范围内？

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

如何解决浏览器清除缓存导致axios请求404？

chrome控制台的$不是jquery ?

关于rem vw 和 媒体查询用在一起的问题

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

前端代码更新如何通知用户刷新页面？

css布局怎么保证右边一直在可视范围内？

H5页面 点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

如何解决浏览器清除缓存导致axios请求404？

chrome控制台的$不是jquery ?

关于rem vw 和媒体查询用在一起的问题

H5页面点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？