https://amatsuzero.github.io/LastStand/tags/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E9%80%82%E9%85%8D/Recent content in 移动端适配 on Last StandHugozh-cnSun, 10 Nov 2024 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/css/css-025/Sat, 09 Nov 2024 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/css/css-025/<h2 id="导读">导读</h2> <p>移动端适配，是我们在开发中经常会遇到的，这里面可能会遇到非常多的问题：</p> <ul> <li><code>1px</code>问题</li> <li><code>UI</code>图完美适配方案</li> <li><code>iPhoneX</code>适配方案</li> <li>横屏适配</li> <li>高清屏图片模糊问题</li> <li>&hellip;</li> </ul> <p>上面这些问题可能我们在开发中已经知道如何解决，但是问题产生的原理，以及解决方案的原理可能会模糊不清。在解决这些问题的过程中，我们往往会遇到非常多的概念：像素、分辨率、<code>PPI</code>、<code>DPI</code>、<code>DP</code>、<code>DIP</code>、<code>DPR</code>、视口等等，你真的能分清这些概念的意义吗？</p> <p>本文将从移动端适配的基础概念出发，探究移动端适配各种问题的解决方案和实现原理。</p> <h2 id="一英寸">一、英寸</h2> <p>一般用英寸描述屏幕的物理大小，如电脑显示器的<code>17</code>、<code>22</code>，手机显示器的<code>4.8</code>、<code>5.7</code>等使用的单位都是英寸。</p> <p>需要注意，上面的尺寸都是屏幕对角线的长度：</p> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/css/css-025/image-01.png"></p> <p>英寸(<code>inch</code>,缩写为<code>in</code>)在荷兰语中的本意是大拇指，一英寸就是指甲底部普通人拇指的宽度。</p> <p>英寸和厘米的换算：<code>1英寸 = 2.54 厘米</code></p> <h2 id="二分辨率">二、分辨率</h2> <h3 id="21-像素">2.1 像素</h3> <p>像素即一个小方块，它具有特定的位置和颜色。</p> <p>图片、电子屏幕（手机、电脑）就是由无数个具有特定颜色和特定位置的小方块拼接而成。</p> <p>像素可以作为图片或电子屏幕的最小组成单位。</p> <p>下面我们使用<code>sketch</code>打开一张图片：</p> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/css/css-025/image-02.png"></p> <p>将这些图片放大即可看到这些像素点：</p> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/css/css-025/image-03.png"></p> <p>通常我们所说的分辨率有两种，屏幕分辨率和图像分辨率。</p> <h3 id="22-屏幕分辨率">2.2 屏幕分辨率</h3> <p>屏幕分辨率指一个屏幕具体由多少个像素点组成。</p> <p>下面是<code>apple</code>的官网上对手机分辨率的描述：</p> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/css/css-025/image-04.png"></p> <p><code>iPhone XS Max</code> 和 <code>iPhone SE</code>的分辨率分别为<code>2688 x 1242</code>和<code>1136 x 640</code>。这表示手机分别在垂直和水平上所具有的像素点数。</p> <p>当然分辨率高不代表屏幕就清晰，屏幕的清晰程度还与尺寸有关。</p> <h3 id="23-图像分辨率">2.3 图像分辨率</h3> <p>我们通常说的<code>图片分辨率</code>其实是指图片含有的<code>像素数</code>，比如一张图片的分辨率为<code>800 x 400</code>。这表示图片分别在垂直和水平上所具有的像素点数为<code>800</code>和<code>400</code>。</p> <p>同一尺寸的图片，分辨率越高，图片越清晰。</p> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/css/css-025/image-05.png"></p> <h3 id="24-ppi">2.4 PPI</h3> <p><code>PPI(Pixel Per Inch)</code>：每英寸包括的像素数。</p> <p><code>PPI</code>可以用于描述屏幕的清晰度以及一张图片的质量。</p> <p>使用<code>PPI</code>描述图片时，<code>PPI</code>越高，图片质量越高，使用<code>PPI</code>描述屏幕时，<code>PPI</code>越高，屏幕越清晰。</p> <p>在上面描述手机分辨率的图片中，我们可以看到：<code>iPhone XS Max</code> 和 <code>iPhone SE</code>的<code>PPI</code>分别为<code>458</code>和<code>326</code>，这足以证明前者的屏幕更清晰。</p> <p>由于手机尺寸为手机对角线的长度，我们通常使用如下的方法计算<code>PPI</code>:</p> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/css/css-025/image-06.png"></p> <p><code>iPhone 6</code>的<code>PPI</code>为</p>