React 移动端开发样式问题记录
1、 input 输入框无法聚焦输入文字
将样式中的 user-select: none; 更改为 user-select: text !important;

2、 背景设置 transparent 无效
经过 IOS 真机测试，transparent 在移动端支持不好，
将 transparent 更改为 rgba(0, 0, 0, 0) 等效透明效果即可

3、 设置了 backdrop-filter: blur(20px) 后，模糊效果出现位置偏移情况
box-shadow 属性的位置偏移值影响了 backdrop-filter 的位置，
可以将 box-shadow 的偏移设置为 0，
或者直接取消 box-shadow，设置为 box-shadow: none; 即可

4、 设置了 background-attachment: fixed 后，背景图片位置不固定
background-attachment: fixed; 对移动端支持也不友好，
可以另外设置一个 <img /> 组件来充当背景图片，
将 <img /> 设置为 position: flixed; 即可达到相同效果。

5、 可以借助 animejs 等插件来辅助自己开发动画效果

移动端适配
移动设备分辨率
前言
主流的移动端屏幕以及一些概念
viewport视口
手机的各种屏幕参数
移动端适配
rem适配方案
vw单位适配

移动设备分辨率
前言
一直以来，我都觉得前端要做移动端的适配都是比较麻烦的事情，现在花一点时间总结一下移动端适配的各种方案，这总结有可能不能很全面，希望以后陆续可以补充完整。
主流的移动端屏幕以及一些概念
viewport视口
我们做前端移动适配的时候，三个视口的概念是必须要有所了解的，这是最基本的概念。简单来说，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。




名称
说明




visual viewport
显示在屏幕上的网页区域，可以简单的认为是手持设备物理屏幕的可视区域


layout viewport
就是你写样式的时候页面的布局区域，简单地理解为你布局完之后的一整个网页的大小


ideal viewport
最理想的视口，这个随设备不同而改变，最理想的视口就是移动设备的屏幕大小


光说可能不能理解清晰，引用几张图片吧







最后这个理想视口是根据不同的手机有所不同的，可以通过http://viewportsizes.com/查询到各种手机的理想视口。
手机的各种屏幕参数
关于手机的各种屏幕参数，在前端页面布局的时候一般采用的都是i6的设计图也就是使用750px宽的设计图进行布局然后对其他手机的屏幕进行适配。

以下是iPhone手机的一些具体参数：




设备
屏幕尺寸
分辨率（pt）
Reader
物理分辨率（px）
PPI(DPI)




i4
3.5寸
320*480
@1x
320*480
163


i5
4寸
320*568
@2x
640*960
326


i6
4.7寸
375*667
@2x
750*1334
326


i6 plus
5.5寸
414*736
@3x
1242*2208
401


屏幕尺寸：这个就没什么好说的啦，实打实的手机屏幕大小

分辨率(pt)：pt可以简单理解为一个物理长度单位，这个是绝对大小，是印刷行业常用的单位，等于1/72英寸。

Reader:是px与pt的的比值，也就是我们常说的几倍屏。

物理分辨率（px）:物理点，屏幕上能够显示的最小单位。

PPI（DPI）:每英寸下有几个px。
移动端适配
目的：

移动端适配的目的就是使编辑的页面在不同尺寸的移动设备上，页面保持比较合理的尺寸比例，以及基本的样式，让用户在视觉上以及使用体验上不会有太大的偏差。
rem适配方案
rem单位相信很多人都有接触过，rem按我的理解是一个相对单位，是相对于页面默认的font-size大小进行适应的。比如说，当页面默认font-size是16px时，1个rem就相当于16px的大小，我们可以通过动态改变font-size的方式来让页面适应不同的手机屏幕大小。改变font-size的方式大致有两种，一种是通过媒体查询media query，另一种是通过js获取屏幕宽度后根据不同屏幕宽度改变font-size。

js动态改变font-size关键代码：
<!-- css -->
<!-- 在meta里插入viewport，一般移动端适配都需要加这一行 -->
<meta name="viewport" content="width=device-width initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

window.onload=function () {
 document.documentElement.style.fontSize=document.documentElement.clientWidth/3.75+'px'
    }//根据设计图来设置除数，比如说是i6就除以7.5那font-size就是50px,1rem=100rpx;

通过上面的设置，你就可以使用rem单位了，在i6规格的设计图下，100px=1rem的方式进行换算，进行页面的布局。通过js实现动态改变font-size来实现移动端适配的方法是一种简单实用的方法，实现效果也是蛮出色的。
另外一种通过media query的就暴力得多了，在css里面直接加入下面代码就可以实现简单的适配。
@media screen and (min-width: 320px) {html{font-size:50px;}}
        @media screen and (min-width: 360px) {html{font-size:56.25px;}}
        @media screen and (min-width: 375px) {html{font-size:58.59375px;}}
        @media screen and (min-width: 400px) {html{font-size:62.5px;}}
        @media screen and (min-width: 414px) {html{font-size:64.6875px;}}
        @media screen and (min-width: 440px) {html{font-size:68.75px;}}
        @media screen and (min-width: 480px) {html{font-size:75px;}}
        @media screen and (min-width: 520px) {html{font-size:81.25px;}}
        @media screen and (min-width: 560px) {html{font-size:87.5px;}}
        @media screen and (min-width: 600px) {html{font-size:93.75px;}}
        @media screen and (min-width: 640px) {html{font-size:100px;}}
        @media screen and (min-width: 680px) {html{font-size:106.25px;}}
        @media screen and (min-width: 720px) {html{font-size:112.5px;}}
        @media screen and (min-width: 760px) {html{font-size:118.75px;}}
        @media screen and (min-width: 800px) {html{font-size:125px;}}
        @media screen and (min-width: 960px) {html{font-size:150px;}}

vw单位适配
vw单位是CSS3才新加入使用的单位，是相对于屏幕进行换算的，是用于移动端适配的利器。100VW就是占满屏幕宽度以此来适配各种不同的屏幕大小。但是，这个vw单位在使用起来的时候还是挺麻烦的，因为要对设计图的尺寸进行换算，而且这种换算成vw会导致页面的实际效果与设计图会有1px到2px的偏差。在换算方面我们可以使用postcss下的一个插件postcss-pixel-to-viewport,这个插件可以让我们在编写CSS代码的时候直接按照设计图给的尺寸直接写px，然后用插件将px转成vw即刻。

配置：
//postcss.config.js
const postcss_px_to_viewport = require("postcss-px-to-viewport")
module.exports = {
    plugins: [
        postcss_px_to_viewport({
            viewportWidth: 375,
            unitPrecision: 5,
            viewportUnit: 'vw',
            selectorBlackList: [],
            minPixelValue: 1,
            mediaQuery: false
        })
    ]

这里写自定义目录标题
移动端是什么？
移动端的现状
移动端布局
视口
布局视口 layout viewport
视觉视口 visual viewport
理想视口 ideal viewport
移动端难点
总结

移动端是什么？
学习移动端布局，首先，我们需要知道什么是移动端，在前端开发里，一般来说，移动端就是手机和平板电脑。
移动端的现状
随着时代的发展，手机的品牌越来越多，每个品牌的型号也各不相同，也就导致了我们在开发时不能像pc端一样直接使用像素来布局，移动端的屏幕大小不同意味着我们使用常规布局在每个移动端打开都会不一样，所以常规流布局就不满足我们的需求了
移动端布局
现阶段的移动端布局方式：

流式布局（百分比布局）

flex 弹性布局

less+rem+媒体查询布局

混合布局

响应式布局：配合媒体查询
在写的移动端布局的时候，盒子模型的使用也是要注意的，尽量使用css3盒模型来布局，因为常规流的盒模型的宽高并不会计算边框，而边框是默认是1px，无论在哪个移动端它也会是1px，会直接影响到布局。
视口
布局视口 layout viewport
一般移动设备的浏览器都默认设置了一个布局视口，用于解PC端页面在手机上显示的问题。

iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
视觉视口 visual viewport
视觉视口说白了就是我们能看到网站的区域

我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。
理想视口 ideal viewport
为了使网站在移动端有最理想的浏览和阅读宽度而设定

理想视口，对设备来讲，是最理想的视口尺寸

需要手动添写meta视口标签通知浏览器操作

meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽
<meta name="viewport" content="width=device-width,
      user-scalable=no,initial-scale=1.0,maximunm-scale=1.0,minimum-scale=1.0">

只要将html头部的meta标签内容改为上面这样，就可以了。
移动端难点
1.精灵图

因为移动端的尺寸比较小，我们正常的精灵图在直接插入时会看起来很模糊，这个时候就需要使用二倍图，正常来说我们使用的1px就是1个物理像素，但是在移动端的时候我们需要在1px中装入多个物理像素，这样才能保证图片不模糊，也能使图片缩放之后任然能够保证清晰度。

2.开发方案的选择

一般主流方案就是将pc端和移动端的样式分开，也就是说，PC端和移动端为两套网站，pc端是pc端的样式，移动端在写一套，专门针对移动端适配的一套网站

但是我们也可以利用媒体查询来进行响应式布局，也就是说pc端和移动端共用一套网站，只不过在不同屏幕下，样式会自动适配。
总结
移动端的布局其实并不难，只要注意在布局时一定是使用百分比或者相对单位来做布局，让里面的元素能够随着页面大小的缩放整体缩放，不能出现一缩放界面就混乱的情况。

移动端
viewport视口设置
浏览器兼容性
-webkit-内核主流
移动端布局方式

流式布局（自适应百分比布局）

盒子宽度设为百分比，根据屏幕宽度进行伸缩，内容向两侧填充

优：适于移动端

缺：非等比
bootstrap响应式布局

兼容多个终端，利用媒体查询原理，根据screen的宽度确定某个宽度区间的网页布局
媒体查询+rem布局

相对于网站根元素动态计算大小

优：适配手机和ipad，等比
flex弹性布局

移动端和PC端区别
关注的问题：

手机兼容性vs浏览器兼容性
touch事件
移动端自适应
移动端流量