标签：逻辑 缩放 适配 Javascript 像素 320px 淘宝 1rem 物理
淘宝移动端适配
像素
物理像素就是屏幕最小发光点，RGB红绿蓝组成一个发光点即一个物理像素
PC上，一个逻辑像素(CSS)像素，等于一个物理像素
但是在移动端的高分屏上，一倍屏下一个物理像素等于一个逻辑像素
二倍屏幕下。一个逻辑像素等于二倍物理像素(四个物理像素点)
以此类推
当设置不缩放。逻辑像素等于物理像素，1rem等于逻辑(CSS,手机宽度)像素/10
| ip3gs | ip4s | ip6p | ip12 | |
|---|---|---|---|---|
| 几倍屏 | 1 | 2 | 3 | 3 |
| 缩放倍数 | 1 | 1 | 1 | 1 |
| 宽度rem | 1 | 1 | 1 | 1 |
| 物理像素 | 320px | 640px | 1242px | 1170px |
| 逻辑像素 | 320px | 320px | 414px | 390px |
| 逻辑(CSS,手机宽度)像素 1rem等于 |
32px | 32px | 41.4px | ? 39px |
不设置缩放数值，通过flexible.js计算缩放，1rem等于物理像素/10
假设不缩放,缩放等于1，ip4s的10rem=640px，320的屏幕肯定放不下，所选择缩放
对比1倍，2倍，3倍屏幕效果，分别为Iphone3GS,Iphone4S,Iphone6P
屏幕宽度分为10份，每份1rem，每份为物理像素的10分之一 == 物理像素/10 == HTML的FontSize
| ip3gs | ip4s | ip6p | ip12 | |
|---|---|---|---|---|
| 几倍屏 | 1 | 2 | 3 | 3 |
| 宽度rem | 1 | 1 | 1 | 1 |
| 物理像素 | 320px | 640px | 1242px | 1170px |
| 逻辑像素 | 320px | 320px | 414px | 390px |
| 逻辑(CSS,手机宽度)像素 1rem等于 |
32px | 64px | 124.2px | ? 39px |
标签：逻辑,缩放,适配,Javascript,像素,320px,淘宝,1rem,物理 来源： https://www.cnblogs.com/x-mao/p/15097066.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。