工具
- 点击延迟 - FastClick
- 清除默认样式 - reset-css
  - reset-css
  - normalize.css
理论

工具

点击延迟 - FastClick

移动端在触发点击事件时，会有300ms的延迟。换句话说，当我们在点击移动端页面后不会立即做出反应，而是会等待300ms才会触发click事件。
https://github.com/ftlabs/fastclick

npm install fastclick
1. react中index.js 或 vue中 main.js

var FastClick = require('fastclick');
FastClick.attach(document.body);

清除默认样式 - reset-css

reset-css

npm i reset-css
index.js 中 import "reset-css"

normalize.css
npm install --save normalize.css

理论

浏览器

视口
布局视口：一般浏览器默认设置一个布局视口，iOS，Android基本都将视口分辨率设置为980px，所以元素很小需要通过手动缩放网页。
视觉视口：用户看到的网站区域。
理想视口：布局视口的宽度要与理想视口一直，即屏幕多宽（px）布局视口就多宽。（添加视口标签转化为理想视口）
视口标签添加前后对比：
未添加视口标签时布局视口为980px，此时字体很小。添加后布局视口为375px，字体看起来就大。

视口标签

标准写法

<meta name="viewport" content="width=device-width",initial-scale=1, maximum-scale=1,user-scable=no/>

多倍图

物理像素&物理像素比

物理像素：就是分辨率
物理像素比：1px能塞下的物理像素，PC端1:1，移动端不同例如i8为1:2

iphone 8 下的物理像素比

i8的分辨率为750X？，设置div宽为375px时刚好沾满说明物理像素比为 1px：2 = 375px：750

多倍图

原因：由于物理像素比不同，我们把一张5050的图片放到iphone8中会被放大2倍100100, 就会变得模糊。
解决：准备一张100*100的图片，修改宽高为 img{ windth：50px; height50px }

左为5050的图片,右为100100并设置了宽高为50的图片,在移动端显示结果

背景图片

如果将二倍图片作为背景图片,则使用background-size

.doubleImg{
  width: 50px;
  height: 50px;
  border: 1px solid red;
  background: url('./100fen2x.png') no-repeat; //100*100的图片
  background-size: 50px 50px;
  }

如果背景图片是精灵图, 先将图片缩小一半, 再进行定位

background="red url(smiley.gif) top left no-repeat"

.doubleImg{
  width: 50px;
  height: 50px;
  border: 1px solid red;
  //负值:图片向上移动10px 左移动20px
  background: url('./100fen2x.png') -10px -20px no-repeat; //缩小倍数后的精灵图
  }

多倍图切图方法

下载Cutterman或者PxCook
ps中使用如下

移动端

工具