移动端适配的学习总结~

本篇文章是根据个人在工作和学习的一些收获和体会，会从如下几个方面来进行阐述：

• pc像素
• 手机像素
• 完美视口
• 适配单位

像素

这个部分我们要聊到像素和视口两个概念

什么是像素？

• 简单来说，屏幕是由一个一个的发光的点构成的，这个一个个的小点就是，我们所说的像素
• 分辨率：1920 × 1080 说的就是屏幕的小点的数量
• 在前端开发中，像素要分两种情况讨论：css像素和物理像素

  1. 物理像素：上述所说的小点点

  2. css像素：编写网页时所用的像素

     浏览器在显示网页时，需要将css像素转换为物理像素再呈现

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

视口（viewport）

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

• 可以通过查看视口大小，来观察css像素和物理像素的比值
  默认情况下，

  • 可通过浏览器调试工具查看html标签盒模型的宽度，来查看像素，如：
    
  • 物理像素:1280px
  • 此时的css像素和物理像素的比值为： 1：1

• 而在放大二倍的情况下：

  • 比值为2：1

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

手机像素

移动端作为本文的重点阐述对象

• 在不同的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰
• 点击可查看各种移动设备的屏幕配置
  我们观察到 iPhone6为4.7寸 屏幕为 750 × 1334
  再例如，24寸显示器的分辨率为 1920 × 1080
• 但是这里我要说的是，智能手机的像素点 远远小于 pc端的像素点
• 那么问题来了：一个宽度为900px的网页在iPhone6中要如何显示呢？
  默认情况下，移动端的网页都会将视口设置为980像素（css像素），
  以确保pc端网页可以在移动端正常访问，
  但是如果网页的宽度超过了980像素，移动端的浏览器会自动对网页进行缩放以完整显示网页。
• 所以基本大部分的pc端网页都可以在移动端浏览器中正常浏览，但往往都不会有很好的体验，为了解决这个问题大部分网站都会专门为移动端来设计网站。

完美视口

上述中提到:

• 移动端网页默认的视口大小为980 css像素
• 所以默认情况下，移动端的像素比是： 980 / 移动端宽度
  1. 如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比可达 1 / 0.*（一比零点几）
  2. 这样的像素比非常的不好，会导致网页中的内容非常非常的小，我们必须要确保一个合理的比例以达到良好的用户体验
• 通过改变视口的大小，来改变物理像素和css像素的比值
• 可以通过meta标签来设置视口的大小
• 每一款移动设备设计时，都会有一个最佳像素比，
  一般我们只需要将像素比设置为该值即可得到一个最佳效果
  将像素比设置为最佳像素比的视口大小就称其为完美视口
  1. width=device-width 和 inital-scale=1.0
  2. 这两个其实是一个意思，视口的宽度为完美视口宽度，初始化缩放为1.0倍
  3. 只是为了确保一些极端的情况下，如设备的横屏竖屏的切换，确保一直有效。

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

结论：当我们在编写移动端页面时，加上上面这行代码，以保证完美视口

适配单位

• 我们通过查找资料：
  • iPhone6的完美视口大小为375
  • iPhone6 plus的完美视口大小为414
• 由于不同设备和像素比不同，所以同样的375像素在ip6显示的是全屏，而ip6 p却缺了一块
• 由此在移动端开发中，就不适合使用px来布局了

这里提出几个解决方案：

• vw
  1. vw 表示视口的宽度（viewport width）
  2. 100vw = 一个视口宽度
  3. 1vw = 1%视口宽度
  4. vw这个单位永远相当于视口宽度进行计算
• rem
  1. 1 rem = 1 html 字体大小
  2. 但是，网页中字体大小，最小是12px，不能设置一个比12px小的字体大小，否则字体大小自动设置12px（0除外）
• 当然你肯定会说，这样算好麻烦，其实，并不麻烦，之后我会写一篇文章来介绍less的基本用法，用这种方式就行得通了。