移动端点滴yan

<meta name="viewport" 
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
>

移动端300ms延迟以及fastClick原理剖析

#####移动端适配详解 , 给你解决适配烦恼

移动端开发经常遇见的问题以及解决方案

【前端面试题】—21道有关移动端的面试题(附答案)
web移动端常问面试题
移动端开发需要注意事项
前端面试（vue优化、移动端兼容问题、前端安全问题）

移动端开发基础知识

移动端开发基础了解

为什么UI移动端设计稿是750

目前主流750像素，老式375像素，640像素。
iphone4时代的尺寸是640×960，
iphone5/5S/5C是640×1136 ，
IPhone6/7/8是750×1334，
后续包括安卓机都开始基于750，目前已经是行业默认标准。

二分钟了解layout viewport、visual viewport、ideal viewport

二分钟了解layout viewport、visual viewport、ideal viewport

layout viewport：布局视口，就ios而言，移动设备浏览器的layout viewport一般默认设置为980px。
visual viewport：视觉视口，即设备的像素分辨率，以iphone8为例，分辨率为750*1334像素。每个手机的像素分辨率不同，分辨率的大小由硬件决定的。
ideal viewport：理想中的视口。理想视口与设备的宽度一致，iphone8的理想视口是375px。
移动端开发时，我们利用meta标签对viewport进行控制。
现在基本都是这么配置的
<meta name="viewport" content="initial-scale=1">

前端：移动端基础

---逻辑像素（logical pixel）也叫 CSS 像素，设备独立像素 (dpi：device independent pixel)，实际开发中使用的像素。
---物理像素（像素点）屏幕尺寸相同的手机，包含的像素点个数是不确定的，像素点越小，同一方向上容纳的像素个数就越多，图像显示就越精细所以，我们都喜欢买像素高的手机.
---设备像素比 dpr
dpr=设备像素/css像素
所以,dpr=2，就是1个css像素用 2x2个设备像素(物理像素)来绘制
iphone 6 的 dpr就是2，iphone6plus 的 dpr=3
---ppi
表示每英寸的物理像素点，这考验一个屏幕厂商的设计和生产能力, 如小米11的 ppi 为 515.

移动端适配的5种方案

rem
vw vh
%
media
flex
混合使用

px转化为rem的方式

1. 直接蓝湖之类的复制。
2. vscode插件 cssrem
3. npm包：postcss-px2rem

html中设置字体字号,html中设置字体大小的方法

可以用 flexible.js
rem都是基于html计算的，而不是body。
html font-size 百分比是基于16px计算。16px默认是100%，font-size 百分比都是基于16px计算。16px=100%，1px=6.25%，所以10px=62.5%。
html的字体大小设置，在flexible中是屏幕宽度除以10。
如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。
pc端html 一般写10px居多,body是12px(1.2rem)，手机端16px居多。
设计师给的pc端设计稿一般是基于10px给的，所有px2rem(10)方法的实现逻辑，一般是px/10。
如果设计师给的移动端的设计稿，字体默认是12px的那么参考pc端的字体，不过距离特殊，比如750px，750px/2=375, 使用方法 px2rem(375)。

html{font-size:62.5%;}
body{
	font-size:12px;
	font-size:1.2rem;
}
@media only screen and (min-width: 320px){
  html {
    font-size: 62.5% !important;
  }
}
@media only screen and (min-width: 640px){
  html {
    font-size: 125% !important;
  }
}
@media only screen and (min-width: 750px){
  html {
    font-size: 150% !important;
  }
}
@media only screen and (min-width: 1242px){
  html {
    font-size: 187.5% !important;
  }
}
----另一种书写方法
/*手机端的标准字体大小为16px*/
html {
    font-size: 16px;
}
@media only screen and (min-width : 320px) {
}
 
/*当屏幕宽度大于480像素时，将采用以下字体大小为标准大小，下同*/
@media only screen and (min-width : 480px) {
    html {
        font-size: 18px;
    }
}
@media only screen and (min-width : 768px) {
    html {
        font-size: 20px;
    }
} 
@media only screen and (min-width : 992px) {
    html {
        font-size: 20px;
    }
}
@media only screen and (min-width : 1200px) {
    html {
        font-size: 22px;
    }
}

实现媒体查询不同dpr下的图片

.bg-image(@url){
    background-image: url("@{url}@2x.png");
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
      background-image: url("@{url}@3x.png")
    }
  }

在写html的时候要除以2才正好

移动端下1px 0.5px解决方案

iphone6的屏幕宽度为375px，设计师做的视觉稿一般是750px，也就是2x，这个时候设计师在视觉稿上画了1px的边框，于是你就写了“border-width:1px”，so...1px边框问题产生了。
对设计师来说它的1px是相对于750px的（物理像素），对你来说你的1px是相对于375px的（css像素）“实际上你应该是border-width:0.5px”。
-------------
0.5px，相信浏览器肯定是会慢慢支持的，目前而言，如果能用的话，可以hack一下。
对于老项目，建议采用transform+伪类。
新项目可以设置viewport的scale值，这个方法兼容性好。
postcss-write-svg简单易用，仅适合直线，圆角建议用transform+伪类实现。

1px 的解决方案

1. 伪类+transform
2. viewport + rem
3. border-image
4. background-image

如果要画一条0.5px的线，你会怎么去实现呢？讲讲你的方法。

1.  1px + scaleY(0.5)
2.  svg
3. viewport

css中的body先全局声明font-size=62.5%，%的算法和rem一样。

因为16px=100%，1px=6.25%，所以10px=62.5%。
1rem=10px，所以12px=1.2rem。px与rem的转换倍率是10，很方便。
计算是基于html计算的，而不是body, flexible源码也是通过控制html，但是body也会设置的。body设置12px，而html一般设置 10px 然后改变html的大小。

html{font-size:62.5%;}
body{
             font-size:12px;
             font-size:1.2rem ;    /* 为兼容不支持rem的浏览器，要在rem前写上对应的px值，不支持的浏览器可以优雅降级 */
}
p{
             font-size:14px;
             font-size:1.4rem;
}

移动端调试

移动端fastclick取消300ms的延迟。