移动端开发之二倍图

最新推荐文章于 2024-03-29 21:57:13 发布

爱编程的小疯子

最新推荐文章于 2024-03-29 21:57:13 发布

阅读量3.1k

点赞数 3

分类专栏：移动端开发文章标签： iphone ios

本文链接：https://blog.csdn.net/HXL521666/article/details/121214109

版权

移动端开发专栏收录该内容

7 篇文章 1 订阅

订阅专栏

物理像素&物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。出厂就设置好了。(分辨率)
我们开发时候的1px不一定就等于1个物理像素
PC端页面，1个px等于1个物理像素，但是移动端就不尽相同
1个px的能显示的像素个数，称为物理像素比或屏幕像素比

物理像素比 = 物理像素（分辨率） / 独立像素（CSS像素）

例如：iPhone X 的物理像素比为 3

屏幕尺寸	独立像素（CSS像素）	物理像素（分辨率）	ppi/dpi（像素密度）	dpr（倍图）
5.8英寸	812×375	2436×1125	458	3

物理像素比提出的原因：

在早期，PC及移动端都是：1CSS像素 = 1物理像素
随着Retina（视网膜屏幕）显示技术的普及，可以将更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

多倍图

对于一张50px*50px的图片，在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊
在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题
通常使用二倍体，是因为 iPhone 6\7\8 的影响，但是现在还存在 3倍图4倍图的情况，这个要看实际开发需求
背景图片要注意缩放问题
字体不用考虑缩放问题，因为字体是矢量的，不会失真

/* 在 iphone8 下面 */
  img {
      /* 原始图片100*100px */
      width: 50px;
      height: 50px;
  }

  .box {
      /* 原始图片100*100px */
      background-size: 50px 50px;
  }

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>03-二倍图做法</title>
    <style>
        /* 我们需要一个50*50像素（css像素）的图片，直接放到我们的iphone8里面会放大2倍100*100就会模糊 */
        /* 我们采取的是放一个100*100图片，然后手动的把这个图片缩小为50*50（css像素）*/
        /* 我们准备的图片比我们实际需要的大小大2倍，这就方式就是2倍图 */
        img:nth-child(2) {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <!-- 模糊的 -->
    <img src="images/apple50.jpg" alt="">
    <!-- 我们采取2倍图 -->
    <img src="images/apple100.jpg" alt="">
</body>

</html>

背景缩放

background-size属性规定背景图像的尺寸

background-size: 背景图片宽度 背景图片高度;

单位：长度 | 百分比 | cover | contain
cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
contain 把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

注意：

以长度为单位时，只写其中一个参数，另一个参数会自动适配
以百分比为单位时，其参照对象为父盒子，只写其中一个参数，另一个参数会自动适配

【背景缩放案例】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>05-背景图片2倍图</title>

    <style>
        /* 1. 我们有一个50*50的盒子需要一个背景图片，但是根据分析这个图片还是要准备2倍，100*100 */
        /* 2. 我们需要把这个图片缩放一半，也就是 50*50 background-size*/
        div {
            width: 50px;
            height: 50px;
            border: 1px solid red;
            background: url(images/apple100.jpg) no-repeat;
            background-size: 50px 50px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

多倍图切网 cutterman

一次性导出多种倍数的图片

背景线性渐变

background: linear-gradient(起始方向，颜色1，颜色2，...);

background: -webkit-linear-gradient(left,red,blue);

background: -webkit-linear-gradient(left top,red,blue);

背景渐变必须添加浏览器私有前缀

起始方向可以是：方位名词或者度数，如果省略，默认就是top