拿到一份设计稿，我该如何进行移动端开发？

出来混，那些混过去的，迟早是要还的 (￣Д ￣)┍ 。

让我们来解决几个问题：

1. 什么是 viewport ? 它的的作用是啥？

提到 viewport，之前总感觉挺突兀的，但是当我最近做移动端项目时，突然关注到一直被忽略的 meta 标签的时候，才恍然大悟（o(╯□╰)o）。那么，首先让我们来了解一下 meta 标签☛一直被忽略的meta标签了解一下，之后再去看 viewport，就很容易记住了，不就是 meta 标签中 name 属性的一个值嘛。

那么， 它的作用是啥呢？要了解它具体的作用，我们需要先来了解一些相关的基本知识。

视口类型

viewport 指浏览器的窗口，即浏览器上用来显示网页的那部分区域，是用户网页的可视区域。

viewport 的功能在于控制你网站的最高块状（block）容器：元素。可以理解为 viewport 是容纳 元素的元素。 元素的宽度为浏览器的宽度，即为 viewport 宽度的100%。（原文）

在移动端和pc端，视口是不同的。pc端的视口是浏览器窗口区域，而在移动端则有三个不同的视口概念：布局视口、视觉视口、理想视口。

layout viewport（布局视口）：网页布局的基准窗口，在PC浏览器上，相当于当前浏览器的窗口大小（不包括borders 、margins、滚动条）。在移动端，布局视口被赋予一个默认值，大部分为980px，这保证PC的网页可以在手机浏览器上呈现，但是非常小，用户可以手动对网页进行放大。 可以通过 document.documentElement.clientWidth/clientHeight 获取网页在标准模式下的布局视口大小。
visual viewport（视觉视口）：用户在移动设备屏幕上能看到的那部分区域。 可以通过 window.innerWidth / innerHeight 来获取视觉视口大小。
ideal viewport（理想视口）：网站页面在移动端展示的理想大小。使页面的宽度跟设备宽度一致（布局视口=理想视口 = 视觉视口），我们就能在移动屏幕上看到正常舒服的页面。 可以通过调用 screen.width / height 来获取理想视口大小。