CSS（十一）-- 手机像素

目录

• 1.像素
  • css像素：编写网页时，我们所用像素都是css像素
• 2.视口：
• 3.移动端的像素
  • 3.1完美视口
    • 通过视口来调整像素比
  • 3.2手机端元素布局
    • 使用vw（视口宽度）来布局
    • 使用rem来布局
    • 页面的设计图像素设置

1.像素

• 屏幕是由一个一个发光的小点构成，这一个个小点就是像素
• 分辨率：1920*1080 说的是屏幕中小点的数量
• 在前段开发中像素要分成两种情况进行讨论，css像素和物理像素
• 物理像素：上述所说的小点就属于物理像素

css像素：编写网页时，我们所用像素都是css像素

• 一个css像素最终由几个物理像素显示，再由浏览器决定
• 默认情况下，在pc中 一个css像素==一个物理像素

2.视口：

• 浏览器中用来显示网页的区域
  可以通过查看视口的大小来观察CSS像素和物理像素的比值

• 默认情况下：

  • 视口宽度：1920（CSS像素）1920（物理像素）
  • 此时CSS像素和物理像素的比值是1:1

• 放大两倍的情况

  • 视口宽度：960px(CSS像素) 1920px（物理像素）
  • 此时CSS像素和物理像素的比是1:2

• 我么可以通过改变视口的大小，来改变CSS像素和物理像素的比值

3.移动端的像素

• 在不同的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰

• 智能手机的像素点远远小于计算机的像素点

• 默认情况下，移动端的网页都会将视口设置为980像素（css像素）。以确保pc端网页可以在移动端正常访问，移动端的浏览器会自动对网页缩放以完整显示网页

  • 所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验，大部分网站往往都会专门为移动端设计网页

3.1完美视口

• 移动端默认的视口大小是980px（css像素），默认情况下，移动端的像素比就是 980/移动端宽度（980/750）
• 如果我们直接在网页中编写移动代码，这样在980的视口下，像素比是非常不友好，导致网页中的内容非常小
• 编写移动页面时，必须要确保要有一个比较合理的像素比
  • 1css像素对应2个物理像素
  • （或者）1css像素对应3个物理像素

通过视口来调整像素比

• 通过meta标签来设置视口大小

复制<meta name="renderer" content="width=300px">

• 一般我们只需要将像素比设置为该值即可得到一个最佳效果，将像素比设置为最佳像素比的视口大小我们称其为完美视口

• device-width表示设备的宽度（完美视口）

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

3.2手机端元素布局

• 由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样的，比如在iphone6中375为全屏，而到了plus中375就会缺一块

• 所以在移动端开发时，就不能再使用px来进行布局了

使用vw（视口宽度）来布局

• viewport width：永远相对于视口宽度进行计算
• 100vw就等于一个视口的宽度（横向撑满）

<meta name="renderer" content="webkit">//指定双核浏览器（如qq，360浏览器）默认以何种方式渲染页面，这里指定默认用webkit渲染

使用rem来布局

• 1rem代表html的字体大小
• 2rem代表一倍html字体大小

100vw=750px
所以，1px=0.13333333333333vw
html{
      font-size:0.1333333333333333vw;
}
.box1{
      width:48rem;
      height:35rem;
}

注意：网页中字体大小最小是12px，不能设置一个比12像素还小的字体，如果我们设置了一个小于12px的字体，则字体自动设置为12

• 虽然现在浏览器有更新能够随意设置字体，但是为了兼容还是需要改进代码

html{
      font-size:13.33333333333333vw;
}
.box1{
      width:0.48rem;
      height:0.35rem;
}

页面的设计图像素设置

• 如果设备的完美视口为375，那么设计图的宽度：750px 1125px
  • 原因

1. 因为现在完美视口为375，物理像素和完美视口为2:1
2. 当设计图为375时，就会将原来375的页面放大两倍
3. 所以要将设计图设计为750，甚至为1125（三倍）