像素、移动端网页——CSS

像素

像素定义

• 屏幕是由一个一个发光的小点构成，这一个个的小点就是像素
• 分辨率: 1920 x 1080说的就是屏幕中小点的数量

像素分类

在前端开发中像素要分成两种情况讨论: CSS像素和物理像素

• 物理像素，上述所说的小点点就属于物理像素
• CSS像素，编写网页时，我们所用像素都是css像素
  • 浏览器在显示网页时，需要将css像素转换为物理像素然后再呈现
  • 一个css像素最终由几个物理像素显示,由浏览器决定;
  • 默认情况下在pc端，一个css像素=一个物理像素

视口（viewport)

• 视口就是屏幕中用来显示网页的区域，即在窗口中显示的网页像素大小。
• ——视口的大小就是当前窗口所显示的CSS像素大小，会随着网页的缩放而改变大小。

视口大小的查看，视口的宽度即html的宽度，查看html 的宽度即可

• 可以通过查看视口的大小,来观察css像素和物理像素的比值
  • 默认情况下:
    视口宽度1920px (CSS像素)，1920px（物理像素)，即一个css像素=一个物理像素，css像素：物理像素 = 1：1
    （注意，为了好看，win10默认是 css像素：物理像素 = 1：1.5）
  • 放大两倍
    放大网页就相当于视口变小
    视口宽度960px (CSS像素)，1920px（物理像素)
    此时，css像素：物理像素 = 1：2 （指的是长或宽，面积就是1：4了）
  • 我们可以通过改变视口的大小，来改变css像素和物理像素的比

css像素 / 物理像素 = 1正常显示
css像素 / 物理像素 < 1 放大显示
css像素 / 物理像素 > 1 缩小显示

手机像素

移动端的物理像素

在不同的屏幕,单位像素的大小是不同的,像素越小屏幕会越清晰。——说的是物理像素
eg：（物理像素）
电脑像素：24寸 - 1920x1080
手机i6像素 ：4.7寸 - 750 x 1334
智能手机的像素点远远小于计算机的像素点。

屏幕尺寸大全：
https://www.shejidaren.com/examples/tools/device-metrics/index.html

移动端的视口——css像素

默认情况下，移动端的网页都会将视口设置为980像素（css像素)，以确保pc端网页可以在移动端正常访问。

注意查看移动端像素的时候不要设置 <meta name="viewport" content="width=device-width, initial-scale=1.0">

网页元素在移动端的显示：

• 网页的宽度小于了980px，正常显示
• 如果网页的宽度超过了980px,移动端的浏览器会自动对网页缩放以完整显示网页，但是就会显示的非常小。
• 所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验，为了解决这个问题，大部分网站都会专门为移动端设计网页。

移动端网页的实现

调整像素比

移动端默认的视口大小是980px(css像素)，移动端宽度使759px（物理像素）
所以，默认情况下，移动端的像素比就是视口大小/移动端宽度 (988/750)
满足： css像素 / 物理像素 > 1 缩小显示
所以如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好，导致网页中的内容非常非常的小。

• 编写移动页面时，必须要对像素比进行调整：

  • 调整方案，设置合适的像素比
    eg：
    1css像素对应2个物理像素
    1css像素对应3个物理像素
    即，使css像素 / 物理像素<1
  • 进行调整
    利用公式：css像素 / 物理像素，物理像素我们无法改变，所以要将css像素（视口大小）调小。
    调整视口
    可以通过meta标签来设置视口大小
    eg：将视口调成100px： <meta name="viewport" content="width=100px">
    调整之后，就实现了放大效果：
    

• 最佳像素比
  每一款移动设备设计时，都会有一个最佳的像素比,
  一般我们只需要将像素比设置为该值即可得到一个最佳效果

  可以在屏幕尺寸大全中查看：https://www.shejidaren.com/examples/tools/device-metrics/index.html
  
  但是不同的设备像素比是不一样的，所以可以直接使用如下meta进行适配

   <meta name="viewport" content="width=device-width">

也可以加上initial-scale=1.0，初始化时口是1倍，含义和 content="width=device-width是一样的，所以meta可以写成这样，设置成完美视口

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