跳到主要内容

移动端

像素（px）​

  • 像素是屏幕上一个一个会发光的小点
  • 物理像素
    • 会发光的小点
  • css像素
    • 我们编写样式时使用px
  • 我们编写样式时使用css像素，屏幕呈现图像时使用的物理的像素
    • 我们默认情况下在pc中，一个css像素对应一个物理像素（1 ：1）
  • 当我们在浏览器中或系统中对网页进行缩放时，像素比会发生变化
    • 比如：当我们将网页放大1.5倍时，CSS像素是不变的，而物理像素会变为原来的1.5倍大（1 ：1.5）

视口（viewport）​

  • 浏览器的可视区域称为视口

移动端​

  • 移动端的项目通常都会运行在手机中，手机屏幕清晰度都是非常的高的（物理像素越小，清晰度就越高）

  • 同样是12px的字体，在显示器中看起来正合适，但是到了手机中，就是看不清，也就是说，如果将pc端的页面直接在手机中呈现，效果是很差的

  • 为了使得pc端页面可以在手机中正常显示，在显示pc端页面时，移动端的浏览器会自动将视口宽度转换为980px，如果pc端页面大小超过了980px，浏览器会自动对页面进行缩小，使得网页可以在浏览器中完整呈现，但是即使这样，网页在移动端浏览器中的体验依然非常的不好

  • 移动端浏览器，默认的像素比是：

    • 980 ：xxx
    • 980 : 1080

  • 为了在移动端有一个更好的体验，公司可以为手机设置一个专门的页面

  • 每一个移动设备在出厂时，都会设计一个最佳的像素的比，只有达到了最佳的像素比时，才能确保网页在移动端中有一个最佳的效果

  • 例如：

    • iPhone 12 pro的像素比是 1 : 3 1个css像素 对应 3个物理像素

  • 要使得浏览器有一个最佳效果，必须先使得网页变成最佳像素比

    • 目前：980(视口大小) : 1170(手机屏幕物理像素) => 390 : 1170

    • 期望：1 : 3

    • 可以通过调整视口的大小来改变像素比

    • 当一个视口的宽度可以使得像素比变为最佳像素比时，这个视口就被称为完美视口

    • iPhone12 pro的完美视口就是 390

    • 但是，不同手机的完美视口是不同的，如果简单粗暴设置为390，这样一来只能在该手机中取得最佳效果，其他手机就不行了，我们希望我们的页面在不同的设置中都能以完美视口来呈现

    • 在12pro，视口是390，在se中，视口是375

    • 完美视口，记住！凡是开发需要在移动端中访问的页面，都要加上完美视口

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

适配问题​

  • 开启完美视口后，任何移动设备都能获得一个最佳的浏览效果
  • 但是，这样却导致了不同设备下视口宽度不同。同样是390px，在12 pro下是全屏，但到了se下就出现了滚动条，到了iPad下就剩下了一半了！这样一来，我们就不能在移动端项目中再使用px作为单位了！
  • 可以使用vw来解决这个问题，vw - viewport width 视口宽度
    • 1vw = 1% 视口宽度
  • 实际开发中，设计图的宽度都是像素为单位的，有375 750 1125 414
  • 在将设计图转换为页面时，单位vw
  • 以750宽的设计图为例 750px = 100vw 1px = 0.1333333vw