如何使用 rem 和 px 函数适配各种屏幕
1. 整体屏幕适配
整体适配
假设我们的设计稿是16：9的比例，大屏是红色的边框，我们想要显示的效果是紫色 部分，上下居中，左右居中，这样是最好的效果。
- 如果屏幕很宽，那我们就左右居中，两边留白，宽高比大于16/9的情况；
-
如果屏幕很高，那我们就上下居中，上下留白，宽高比小于等于16/9的情况。
根据这个规律，我们可以得到一个算法：
整体屏幕适配算法 - Wp为页面有效宽度，Hp为页面有效高度。
- 页面左右居中，上下居中，四周留白即可。
const clientWidth = document.documentElement.clientWidth
const clientHeight = document.documentElement.clientHeight
const pageWidth = clientWidth / clientHeight > 16/9 ? clientHeight * (16 / 9): clientWidth
const pageHeight = pageWidth / (16 / 9)
- 然后在head里用JS设置 1rem = Wp / 100
const string = `<style>html{
font-size: ${pageWidth / 100}px
}</style>`
document.write(string)
2. 适配一个div
div适配
假设设计稿中div的宽度是x，大屏中的宽度为y。
那么我们可以得到一个算法：
div适配算法
- 假设某 div 在设计稿中长 100px(S设)，设计稿宽度 1920px(W设)，
- 那么该 div 在页面中长为 100/1920 * 100rem
- 最后可以写一个 px() 函数来计算 100px 对应的 rem
const px = (n)=>{(n/1920) * pageWidth}
