标签：1rem vscode px 宽度 iPhone rem 375px 移动

一、安装px2rem插件

浏览器默认1rem = 16px,在这里可以修改默认值为100,以Phone 6/7/8 尺寸作为参照，原因在步骤二中。

二、在根元素中设置font-size

参照iPhone 6/7/8 尺寸，宽度为375px，给出计算公式：calc(100vw/3.75)。

因为 1vw = 1/100*视口宽度，所以：视口宽度 = 100 vw;

使用iPhone 6/7/8时，视图宽度为375px，即100 vw = 375px; 带入calc计算公式中，得 font-size:100px，即1rem = 100px。

使用iPhone 6/7/8 Plus时，视图宽度为414px，即100vw = 414px；带入calc计算公式中，得 fon-size:110.4px，即1rem = 110.4px。

这就实现了根元素的字体大小随着不同移动设备尺寸的变化而改变。

UI设计图一般以iPhone 6/7/8为参照，宽度为375px，假如某设计页面中一个div的宽度为48px，因为在 px2rem工具中，我们设置了1rem=100px，所以该div的宽度用rem表示为0.48rem。

若放在iPhone 6/7/8 Plus中，该div宽度为0.48rem*110.4px = 52.992px。

实现了某div元素的宽度随着移动设备宽度的变大而变大。

 三、根据设计图添加每个盒子宽高，并用rem 单位表示（参照iPhone 6/7/8的设计搞）

标签：1rem,vscode,px,宽度,iPhone,rem,375px,移动
来源： https://www.cnblogs.com/heisetianshi/p/14955875.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。