search

sailei1 / blog

1 stars 0 forks source link

rem 方案 #55

Closed sailei1 closed 5 years ago

sailei1 commented 5 years ago

不需要用 media query, 只需下面一句话就可以实现rem自适应方案：

html { font-size: calc(20 / 375 * 100vw); }

这里的375 和 20 指的是 ， 在 iphone6 的设计稿上，1rem=20px（@2x图)

sailei1 commented 5 years ago 
body {
  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

https://css-tricks.com/snippets/css/fluid-typography/ https://css-tricks.com/books/volume-i/scale-typography-screen-size/ https://www.cnblogs.com/imwtr/p/9648233.html 移动端建议 用vw, PC 建议 calc 动态计算区间