rem+vm 适配移动端

本文主要是介绍rem+vm 适配移动端，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

html {
  height: 100%;
  font-size: 50px; // 向下兼容 不止vw时候 写死font-size
  font-size: 13.33333333vw; // 7.5rem === 100vw
  margin: 0 auto;
}

@media (min-width: 560px) { // pc兼容
  html,body {
    font-size: 54px;
    max-width: 540px;
  }
}

@media (max-width: 1024px) { // ipad兼容：ipad最大1024px
  html,body {
    max-width: 1024px;
  }
}
 

1px显示问题 物理像素 dpr>=2 取2倍

.border-bottom { position: relative; &::after { content: ''; position: absolute; z-index: 1; pointer-events: none; background-color: red; height: 1px; left: 0; right: 0; bottom: 0; @media only screen and (min-resolution: 2dppx) { // 非标准的 -webkit-transform: scaleY(0.5); -webkit-transform-origin: 50% 0%; } } } // only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式，这对于防止让选中的样式在老式浏览器中被应用到 // -webkit-device-pixel-ratio 是一个非标准的布尔类型CSS媒体类型，是标准 // resolution 媒体类型的一个替代方案.

 

这篇关于rem+vm 适配移动端的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---