收藏
PHPz批改状态：合格
老师批语：
标准屏 375px （iphone6 的dpi尺寸750 转换为逻辑尺寸375的来的）
通常设置100px =1rem 1rem = 100px = 375px/3.75
以上信息换算，可以理解为这样 375 / 100 = 3.75rem
3.75rem = 100vw
1rem = 100/3.75
通常我们把 html的font-size 设置为100vw/3.75 得出 当前1rem = 26.66vw
如果我们把body的font-size 设置为0.16rem
100vw / 3.75 = 0.16rem 当前屏幕变大时 ，100vw 变大
0.16rem 也会变大。所以对应的尺寸也会发生变化
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><p>标准屏 375px （iphone6 的dpi尺寸750 转换为逻辑尺寸375的来的）通常设置100px =1rem 1rem = 100px = 375px/3.75以上信息换算，可以理解为这样 375 / 100 = 3.75rem3.75rem = 100vw1rem = 100/3.75通常我们把 html的font-size 设置为100vw/3.75 得出 当前1rem = 26.66vw如果我们把body的font-size 设置为0.16rem100vw / 3.75 = 0.16rem 当前屏幕变大时 ，100vw 变大0.16rem 也会变大。所以对应的尺寸也会发生变化</p><style>html{font-size: 100px;font-size:calc(100vw / 3.75);}body {/* 将默认的16px,用rem表示 */font-size: 0.16rem;}@media (max-width:375) {/* 14/16 = 0.875px *//* 1rem = 100 *0.875 = 87.5px */html{font-size:87.5px;/* 设置1rem =87.5px 可保证最小字号14px ，保证用户始终看的清 */}}/* 经过测试观察，当屏幕宽度>=470px 字号 约20px ，就不需要放大显示了 */@media(min-width:470px){html{/* font-size: 应该设置多少合适 *//* 1 默认1rem=100px。此时body中的font-size为16px *//* 16px -》1rem = 100px20px -》 20/16 = 1.25 = 100*1.25 = 125px计算工程1i算出16px -> 20px 变化比例 20/16=1.25对应的rem应该扩大1.25 1000* 1.25 = 125px*/font-size: 125px;}}</style></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
