产品形态：

总结：什么时候共用一套，什么时候用两套？

当结构比较简单的时候，我们可以共用一套。当结构比较复杂我们就可以写两套。

pc端和移动端的区别

  • 事件上的区别：pc端有鼠标，所以会有与鼠标相关的事件：比如点击、滑过等。但是移动端没有鼠标，只有与手指相关的一些事件，比如滑屏，左滑、右滑等事件。
  • 浏览器兼容性：pc端需要考虑各个浏览器的兼容性问题，比如：火狐、谷歌、ie等，但是移动端不需要考虑各个浏览器的兼容问题，它的内核就是webkit和谷歌一样。但是移动端需要考虑适配问题，因为各个手机屏幕不一样大，而且机型不同，有时候也会有一定的兼容问题。

    移动端详解：

    一般情况下设计稿的设计师按照375的尺寸设计，然而在现在移动终端（就是手机）快速更新的时代，每个品牌的手机都有着不同的物理分辨率，这样就会导致，每台设备的逻辑分辨率也不尽相同，此时357的设计稿，如果想要还原那基本是不可能了，这时移动端适配就显得尤其重要
    image.png

    1、屏幕尺寸

    屏幕尺寸是以屏幕对角线的长度来计量，计量单位为英寸
    image.png

    2、像素

    我们看到上图320x480叫分辨率，而这个所谓的分辨率就是说白了就横向320个像素纵向480个像素组成

    3、什么叫分辨率呢?

    屏幕分辨率是指纵横向上的像素点数，单位是px。

苹果的苹果官网上的苹果6的分辨率为750x1334啊，但是设计稿上苹果6的分辨率为375x667啊,而且各个设备的分辨率都比实际分辨率小很多。

4、设备物理分辨率（设备像素/物理像素）

手机生产出来就固定的，也就是液晶屏最高可显示的像素数，屏幕的大小直接决定了物理分辨率的大小
image.png
相信我们所有前端开发者，都是见证了手机这个移动设备发展的过程。从蓝屏手机，到彩屏手机，到诺基亚研发出来触屏手机，再到智能手机一步步发展下来，我们的手机越来越清晰，越来越大，所以我们的屏幕发展也越来越迅速。

上图可以清楚的看到，不同分辨率所带来的的差距。
从最初的颗粒感相当大的屏幕，到720p再到1080p，甚至于现在各家旗舰手机的2k屏幕，我们的物理分辨率在变得原来越大。这样就暴露出来一个问题，我们如果手机分辨率翻倍，我们的图像不就要被缩小一倍，我们难道要在每个设备上就出个设计稿，每个设备的分辨不尽相同啊，你担忧的问题，我们的乔布斯在很多年前就想到了。这就是我们的逻辑分辨率

5、逻辑分辨率（设备独立像素pt）

如下图所示，虽然设备物理分辨不同，但是他的这个逻辑分辨率却都差不多
image.png
乔布斯在iPhone4的发布会上首次提出了Retina Display(视网膜屏幕)的概念，在iPhone4使用的视网膜屏幕中，把2x2个像素当1个像素使用，这样让屏幕看起来更精致，但是元素的大小却不会改变。从此以后高分辨率的设备，多了一个逻辑像素。这些设备逻辑像素的差别虽然不会跨度很大，但是仍然有点差别，于是便诞生了移动端页面需要适配这个问题，既然逻辑像素由物理像素得来，那他们就会有一个像素比值

6、设备像素比

设备像素比device pixel ratio简称dpr（物理像素和设备独立像素的比值）

7、像素密度（PPI）

每英寸中显示的像素数，通常使用ppi来作为像素密度的单位
PPI=屏幕斜边的长度/屏幕尺寸
PPI越大,设备像素的值越多，屏幕就会越清晰
同面积中PPI越多，屏幕就会越清晰
image.png

8、视口

那么在移动端如何配置视口呢？ 简单的一个meta标签即可！
在写移动端的时候一定要加上下面的代码，快捷键：meta:vp + tab

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

image.png
当我们不加视口的时候，模拟移动端，body的宽度默认是980px,并不是手机屏幕的宽度，如果想要把咱们的页面在手机屏幕中显示完全，就会进行缩放，这样的话，里面的文字等就会看不清楚，为了避免这种情况，通常咱们会加视口，让页面的宽度等于手机屏幕的宽度。

理想视口：一般来讲，这个视口其实不是真是存在的，它对设备来说是一个最理想布局视口尺寸，在用户不进行手动缩放的情况下，可以将页面理想地展示。那么所谓的理想宽度就是浏览器（屏幕）的宽度了。

于是上述的meta设置，就是我们的理想设置，他规定了我们的视口宽度为屏幕宽度，初始缩放比例为1，就是初始时候我们的视觉视口就是理想视口！

9、解决适配方法

rem

rem是CSS3新增的一个相对单位，这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

  1. //假设我给根元素的大小设置为14px
  2. html{
  3.     font-size：14px
  4. }
  5. //那么我底下的p标签如果想要也是14像素
  6. p{
  7.     font-size:1rem
  8. }
  9. //如此即可

那我们做移动端的响应式开发，如果纯粹用之前所说的媒体查询，那么我们的代码就会很多，写起来也不是很方便。那么怎么办呢？ 我们就可以结合我们的rem。

rem做移动端的思想

当我们拿到设计稿的时候，如果可以按照设计稿的尺寸去写，然后通过更改一个值，就能更改页面中所写的css，那是不是会很方便，rem刚好就是。 1rem=html的字体大小（默认情况下是16px）；
如果我们随着移动端屏幕的改变，然后改变下html的字体大小，就可以达到刚才的目的。
屏幕的宽度/设计稿的尺寸=x/100; 根据这个计算公式我们是不是可以算出移动端屏幕改变时候的根元素应该具有的字体大小。

rem 是相对于html节点的font-size来做计算的。所以在页面初始话的时候给根元素设置一个font-size，接下来的元素就根据rem来布局，这样就可以保证在页面大小变化时，布局可以自适应，
如此我们只需要给设计稿的px转换成对应的rem单位即可

  1.   <script>
  2.     (function () {
  3.       function computed() {
  4.         // 获取屏幕的宽度
  5.         var win = document.documentElement.clientWidth || document.body.clientWidth;
  6.         // 设计稿的尺寸
  7.         var des = 640;
  8.         // 如果屏幕的宽度>=设计稿的尺寸
  9.         if (win >= des) {
  10.           document.documentElement.style.fontSize = "100px";
  11.           return;
  12.         }
  13.         document.documentElement.style.fontSize = win / des * 100 + "px";
  14.       }
  15.       computed();
  16.       window.onresize = function () {
  17.         computed();
  18.       }
  19.     })();
  20.   </script>

rem只是一种过渡，注定被淘汰，因为用户使用更大的屏幕，是想看到更多的内容，而不是更大的字。

vh/vw

1vw是相对视口宽度的1%
1vh是相对视口高度的1%

image.png

不过这也是需要转换 vh到px的一个转换，比较麻烦，不过到后期工程化会有webpack，webpack解析css 的时候用postcss-loader，能自动实现px到vw的转化

px为主，vw/vh为辅，搭配一些flex（推荐）

总结：移动端适配流程

1. 在head 设置width=device-width的viewport‘
2. 在css中使用px
3. 在适当的场景使用flex布局，或者配合vw进行自适应
4. 在跨设备类型的时候（pc <-> 手机 <-> 平板）使用媒体查询
5. 在跨设备类型如果交互差异太大的情况，考虑分开项目开发

移动端的几个点

1、移动端边框不能识别0.5px，不兼容。所以我们需要借助c3的属性transform：scale（0.5）
2、禁止用户选择页面中的文字或者图片（user-select: none;）

10、移动端趣拼项目

移动端布局