像素

  • 屏幕由一个个发光的小点构成，为像素
  • 在前端开发中的像素分为两种情况讨论 CSS像素和物理像素
  • 物理像素 — 上述所说的小点就是物理像素

  • CSS像素

    • 编写网页时，我们所用的像素都是CSS像素。
    • 浏览器在显示网页时，需要将CSS像素转换为物理像素然后在呈现
    • 一个CSS像素最终由几个物理像素显示，由浏览器决定
    • 默认情况下在PC段，一个CSS像素=一个物理像素

      视口

  • 视口就是屏幕中用来显示网页的区域

  • 可以通过改变视口的大小，来改变CSS像素和物理像素的比值
    • 通过meta标签指定视口viewpor
    • content属性设为width-device表示设备的宽度
    • 每一款移动设备都有一个最佳像素比
    • 将像素比设置为最佳像素比的视口大小称为完美视口
  • 默认情况下，移动端的网页都会将视口设置为980像素（CSS像素）以确保PC端网页可以在移动端正常访问
  • 如果网页的宽度超过了980，移动端的浏览器会自动对网页缩放

  • 为了解决这个问题，大部分网站都会专门为移动端设计

    vw视口宽度

  • 移动端开发，不再使用px进行布局

  • vw表示视口的宽度，100vw为一个视口的宽度

  • vw永远是相对于视口宽度而言的

    vw适配

  • 可以设置html中的fontsize为一个px换算的vw

  • 再在需要的地方设置rem