使用过的响应式解决方案+网络看到的不错的移动+pc的笔记（网络摘录）

发表于 | 更新于: | 分类于 | | 热度 ℃

Css 移动端响应式解决方案

  • vh，vw，em，px，百分比
  • vh,vw 没用过 em和rem差不多
  • 百分比也是一个不错的解决方便
  • 并没有完美的解决方案，只能说在该使用的地方去使用对的解决方法达到最好的效果
  • 下面说两个我用过的

    1. 知道并用过感觉挺好的一个 js控制配合rem

  • 这个是我在github上面看到的一个vue+vuex的练习项目中下载写了学习时发现的
  • 感觉这个方法挺不错的，js的控制动态切换窗口大小都能切换
  • 配合上rem的适配感觉是一个很棒的响应式的解决方法
  1. js（把js封装在config中在min.js引入就好了方便快捷）,自调用获取dom更改html font-size
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    (function(doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
  1. rem (vue项目中设置Scss)
  • ios：6.1系统以上都支持
  • android：2.1系统以上都支持
  • 根据网页的根元素来设置字体大小，和em（font size of the element）的区别是，em是根据其父元素的字体大小来设置，而rem是根据网页的跟元素（html）来设置字体大小的
  • 默认 font-size是16px
    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* 默认16px */
    html {
        font-size:16px;
    }

    /* 我们试试把p标签设置为12px的字体大小 */
    p {
        font-size: 0.75rem; /* 12/16=0.75 rem */
    }

进阶

  • 如果利用rem来设置css的值，一般要通过一层计算才行，比如如果要设置一个长宽为100px的div，那么就需要计算出100px对应的rem值是 100 / 16 =6.25rem，这在我们写css中，其实算比较繁琐的一步操作了。

  • 这两个方法我都没有去使用，只是知道可以这么去改变

  1. 对于没有使用scss的工程：
    为了方便起见，可以将html的font-size设置成100px，这样在写单位时，直接将数值除以100在加上rem的单位就可以了

  2. 对于使用scss的工程：
    前端构建中，完全可以利用scss来解决这个问题，例如我们可以写一个scss的function px2rem即：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* 设置定义 */
    @function px2rem($px){
        $rem : 37.5px;
        @return ($px/$rem) + rem;
    }

    /*使用时*/
    height: px2rem(90px);
    width: px2rem(90px);;

2. 媒体查询 改变 font-size 这个挺麻烦的考虑很多

  • 相比我更喜欢使用rem+js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    html {
            font-size: 15px
        }
    /* html {
                    font-size: 4.7vw;
         /* rem(root element)配合vw(viewport width)  */
                } */
    @media only screen and (min-width:320PX) and (max-width:359PX) {
        html {
            font-size: 15px
        }
    .....等
    }

网上摘录的方法

移动端准备工作写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<!-- 设置在苹果手机上以应用模式启动时，是否全屏 -->
<meta name='apple-touch-fullscreen' content='yes'>
<!-- ios 系统 作用未知 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- iso 系统 作用未知 -->
<meta content="fullscreen=yes,preventMove=no" name="ML-Config">
<!-- iso 系统 作用未知 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
 <!-- 是否识别 手机号码、 电子邮件 地址 等-->
 <meta name="format-detection" content="telephone=no,email=no,address=no" />

<!-- 让360双核浏览器用webkit内核渲染页面 -->  

<meta name="renderer" content="webkit"> 

<!-- 避免IE使用兼容模式 -->  

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

 允许全屏模式浏览,隐藏浏览器导航栏-->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!--微信缓存-->  
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />  
    <meta http-equiv="Pragma" content="no-cache" />  
    <meta http-equiv="Expires" content="0" />  

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

pc端准备工作

1
2
3
4
5
6
7
8
9
10
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
<!-- 让360双核浏览器用webkit内核渲染页面 -->  

<meta name="renderer" content="webkit"> 

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

base.css公共样式pc端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0;padding:0；border: 0;}

ol,li,ul,dl,dt,dd{list-style:none;}

table{border-collapse:collapse;border-spacing:0}

h1,h2,h3,h4,h5,h6,i,strong {font-weight: normal;}  

img {vertical-align: middle;border: none;width: 100%;}  
i {font: inherit;}  

a {color: #fff;text-decoration: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color:transparent;}

a:hover {text-decoration: underline; outline: none;}  

select::-ms-expand { display: none; }  

a:active,a:hover{outline:0}

.clearfix::before,
.clearfix::after{
    content: '';
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
    clear: both;

}

.fl{ float:left;}
.fr{float:right;}

input,select,option{vertical-align:middle;border-radius:0px;-moz-appearance:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);outline: none;}

input[type="text"],input[type="button"],input[type="submit"],input[type="reset"]{-webkit-appearance: none;appearance: none;border-radius: 0;outline: none;}  

.overflow {overflow:hidden; }

base.css公共样式移动端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0;padding:0}

ol,li,ul,dl,dt,dd{list-style:none;}
.fl {float: left;}  
.fr {float: right;} 

table{border-collapse:collapse;border-spacing:0}

html {  
    -webkit-text-size-adjust: 100%;  
    -ms-text-size-adjust: 100%;  
    /* 解决IOS默认滑动很卡的情况 */  
    -webkit-overflow-scrolling : touch;  
}  
  
/* 禁止缩放表单 */  
input[type="submit"], input[type="reset"], input[type="button"], input {  
    resize: none;  
    border: none;  
}  
  
/* 取消链接高亮  */  
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {  
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
}  
  
/* 设置HTML5元素为块 */  
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {  
    display: block;  
}  
  
/* 图片自适应 */  
img {  
    width: 100%;  
    height: auto;  
    width: auto\9; /* ie8 */  
    -ms-interpolation-mode: bicubic;/*为了照顾ie图片缩放失真*/  
}  
em, i {  
    font-style: normal;  
}  
textarea {  
    resize:none; /*禁用了文本的拖拉，尤其在谷歌下*/  
}   
p {  
    word-wrap:break-word; /* 不够的单词自动换行 而不会被截掉 */  
}  
.clearfix:after {  
    content: "";  
    display: block;  
    visibility: hidden;  
    height: 0;  
    clear: both;  
}  
.clearfix {  
    zoom: 1;  
}  
a {  
    text-decoration: none;  
    color: #fff;  
    font-family: 'Microsoft YaHei', Tahoma, Arial, sans-serif;  
}  
a:hover {  
    text-decoration: none;  outline: none;

}  
 
h1, h2, h3, h4, h5, h6 {  
    font-size: 100%;  
    font-family: 'Microsoft YaHei';  
}  
img {  
    border: none;  
}  
input{  
    font-family: 'Microsoft YaHei';  
}  
/*单行溢出*/  
.one-txt-cut{  
    overflow: hidden;  
    white-space: nowrap;  
    text-overflow: ellipsis;  
}  
/*多行溢出 手机端使用*/  
.txt-cut{  
    overflow : hidden;  
    text-overflow: ellipsis;  
    display: -webkit-box;  
    /* -webkit-line-clamp: 2; */  
    -webkit-box-orient: vertical;  
}  
/* 移动端点击a链接出现蓝色背景问题解决 */  
a:link,a:active,a:visited,a:hover {  
    background: none;  
    -webkit-tap-highlight-color: rgba(0,0,0,0);  
    -webkit-tap-highlight-color: transparent;  
}  
.overflow {overflow:hidden; }

.w50{  
    width: 50%;  
}  
.w25{  
    width: 25%;  
}  
.w20{  
    width: 20%;  
}  
.w33{  
    width: 33.333333%;  
}

移动端布局使用方法rem (他这个和我那个差不多)

第一种：js控制html字体大小， js代码放在head里面

  • html设置初始font-size：320px的字体大小 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
     var html = document.getElementsByTagName('html')[0];

    if(html){
        var w = window.innerWidth;
        var fontSize = (w>640?640:w)/640 *30; 这里最少30，
        html.style.fontSize = fontSize + 'px';
    }
    window.onload = function(){
        window.onresize = function(){
            var w = window.innerWidth;
            console.log(w);
            var fontSize = (w>640?640:w)/640 * 30;这里最少30，
            html.style.fontSize = fontSize + 'px';
        }
    }

第二种：js控制html字体大小常用 ，js代码放在head里面

  • html设置初始font-size：320px的字体大小 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    (function(doc, win) {  
        var docEl = doc.documentElement;  
        var resizeEvt = 'orientationchange' in window ? 'orientationchange': 'resize';   
        var recalc = function() {  
            var clientWidth = docEl.clientWidth;  
            if (!clientWidth)  
                return;  
            docEl.style.fontSize = (clientWidth>640?640:clientWidth)/ 320 *20 +  'px';  
        };  
        // 不同浏览器resize事件处理机制不同  
        // 使用定时器延迟处理resize回调函数以降低重复响应  
        var recalcTimer = null;  
        var delaycalc = function() {  
            win.clearTimeout(recalcTimer);  
            recalcTimer = win.setTimeout(recalc, 100);  
        };  
        // 移动端不需要考虑事件注册函数的兼容性  
        if (!doc.addEventListener)  
            return;  
        win.addEventListener(resizeEvt, delaycalc, false);  
        // DOMContentLoaded事件只在DOM文档树加载完毕触发，此处不用延迟处理  
     doc.addEventListener('DOMContentLoaded', recalc, false); 
    })(document, window);

第三种：用媒体查询控制html字体大小（这种也是我用过的看看他着么说）

一：字体大小为15px开始 常用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
html {
                font-size: 15px
            }
html {
                font-size: 4.7vw;
                /* rem(root element)配合vw(viewport width)  */
            }
@media only screen and (min-width:320PX) and (max-width:359PX) {
    html {
        font-size: 15px
    }
}

@media only screen and (min-width:360PX) and (max-width:374PX) {
    html {
        font-size: 16.875px
    }
}

@media only screen and (min-width:375PX) and (max-width:389PX) {
    html {
        font-size: 17.5781px
    }
}

@media only screen and (min-width:390PX) and (max-width:400PX) {
    html {
        font-size: 18.75px
    }
}

@media only screen and (min-width:401PX) and (max-width:414PX) {
    html {
        font-size: 19.4063px
    }
}
@media only screen and (min-width:415PX) and (max-width:640PX) {
    html {
        font-size:22.5px
    }
}

@media screen and (min-width:641PX) {
    html {
        font-size: 30px
    }
}

二：字体大小为13.65px 不常用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
html {
           font-size: 4.2vw;
           /* rem(root element)配合vw(viewport width)  */
       }
       html {
                font-size: 13.65px
            }
       @media only screen and (min-width:320PX) and (max-width:360PX) {
            html {
                font-size: 13.65px
            }
        }

        @media only screen and (min-width:360PX) and (max-width:375PX) {
            html {
                font-size: 15.36px
            }
        }

        @media only screen and (min-width:375PX) and (max-width:390PX) {
            html {
                font-size: 16px
            }
        }

        @media only screen and (min-width:390PX) and (max-width:414PX) {
            html {
                font-size: 16.64px
            }
        }

        @media only screen and (min-width:414PX) and (max-width:460PX) {
            html {
                font-size: 17.664px
            }
        }
        @media only screen and (min-width:460PX) and (max-width:640PX) {
            html {
                font-size: 20px
            }
        }
        @media screen and (min-width:640PX) {
            html {
                font-size: 27.31px
            }
        }

移动端布局用flex和自动缩放

  • 新旧版本兼容：这里设置flex容器为.box，子元素为.item

Flex 布局

1
2
3
4
5
6
7
.box{
 display: -ms-flexbox; 
 display: -webkit-flex; 
 display: flex; 
 display: -webkit-box; 
 display: -moz-box; 
}

旧版：display：box
新版：display：flex

定义主轴的方向

  • 水平方向

    1
    2
    3
    4
    5
    6
    7
    .box{ 
      -moz-flex-direction: row; 
      -webkit-flex-direction: row;
      flex-direction: row;
      -webkit-box-direction: normal; 
      -webkit-box-orient: horizontal; 
    }

  • 垂直方向

    1
    2
    3
    4
    5
    6
    7
    .box{
     -moz-flex-direction: column;
     -webkit-flex-direction: column;
     flex-direction: column;
     -webkit-box-direction: normal;
     -webkit-box-orient: vertical;
    }

旧版：box-direction: normal 水平方向 | reverse 垂直方向 | inherit ，跟子元素的方向一致; 定义子元素的显示方向。

 box-orient: horizontal  水平排列| vertical 垂直排列| inline-axis 默认 | block-axis 快方式排列 | inherit继承父元素; 定义子元素是否应水平或垂直排列。

这两种要同时设置才能确定排列方式；

水平方向：box-direction: normal；box-orient: horizontal

垂直方向：box-direction: normal； box-orient:vertical

新版：flex-direction：row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

子元素主轴对齐方式

1
2
3
4
5
6
.box{
 -moz-justify-content: center;
 -webkit-justify-content: center;
 justify-content: center;
 -webkit-box-pack: center;
}

旧版： box-pack: start | end | center | justify;

注意：兼容写法新版语法的space-around是不可用的

新版：justify-content：flex-start（默认值）：左对齐

flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

子元素交叉轴对齐方式

1
2
3
4
5
6
.box{
 -moz-align-items: center;
 -webkit-align-items: center;
 align-items: center;
 -webkit-box-align: center;                                                                                
}

旧版： box-align: start | end | center | baseline | stretch;

新版：align-items：flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

子元素属性：子元素在水平或者垂直方向占几分

1
2
3
4
5
6
.item{
 -moz-flex: 1;
 -webkit-flex: 1;
 flex: 1;
 -webkit-box-flex: 1.0;
}

旧版：box-flex：1.0浮点数字
新版：flex：1 数字

超出要不要换行 不兼容，就是兼容了也无效

  • 要求换行
    1
    2
    3
    4
    .box{
     flex-wrap:wrap;
     box-lines: multiple; 
    }

旧版： box-lines: single默认不允许 | multiple 允许;

新版：flex-wrap: nowrap 不换行

wrap 换行，第一行在上方

wrap-reverse 换行，第一行在下方

新版的其他语法

  1. 行内元素也可以定义flex语法：不常用

    1
    2
    3
    4
    .box{
      display: -webkit-inline-flex;
      display: inline-flex;
    }：

  2. 父元素属性align-content属性 定义在多跟抽线的对齐方式，一般是换行以后的对齐方式，只有一条抽线改属性不生效，常用在换行以后有间距的问题：设置align-content：flex-start； 不常用

    align-content：flex-start：与交叉轴的起点对齐。

    flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

  3. 子元素属性flex，是flex-grow, flex-shrink 和 flex-basis的简写，一般只定义子元素占多少份，常用

  4. 子元素属性flex-grow 定义子元素占一行的多少份，值为数字 不常用

05、子元素属性flex-basis属性 定义了在分配多余空间之前，项目占据的主轴空间 像素单位和百分比，默认auto

  1. 子元素属性flex-shrink属性 定义了子元素的缩小比例，如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值无效

  2. 子元素属性order属性 定义子元素的排列方式，数值越小，越靠前排列，数字

  3. 子元素属性align-self属性 定义允许单个项目有与其他项目不一样的对齐方式，会覆盖algin-items属性 不常用

    align-self: auto  默认  表示继承父元素           

                 flex-start  与交叉轴的起点对齐。

                 flex-end  与交叉轴的终点对齐。

                 center  与交叉轴的中点对齐

                 baseline: 项目的第一行文字的基线对齐。

            stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

兼容无效

justify-content: space-around 不能用

flex-wrap: wrap 不能用

flex兼容的标准写法

1
2
3
4
-webkit-前缀标准版
-moz-前缀标准版
标准版
-webkit-前缀09版
  • 试例
    1
    2
    3
    4
    5
    6
    7
    .box{
     display: -ms-flexbox; 
     display: -webkit-flex; 
     display: flex; 
     display: -webkit-box; 
     display: -moz-box; 
    }

新版的语法

定义flex:

1
2
3
4
5
6
7
8
9
.box{
    display: -webkit-flex; /*webkit*/
    display: flex;
}
/*行内flex*/
.box{
    display: -webkit-inline-flex; /*webkit*/
    display:inline-flex;
}

父元素属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.box{
    flex-direction:    row      | row-reverse | column | column-reverse;
         /*主轴方向：左到右（默认） |   右到左    | 上到下 | 下到上*/
 
    flex-wrap:    nowrap   | wrap | wrap-reverse;
       /*换行：不换行（默认） | 换行 | 换行并第一行在下方*/
 
    flex-flow: <flex-direction> || <flex-wrap>;
     /*主轴方向和换行简写*/
 
    justify-content:   flex-start   | flex-end |   center | space-between | space-around;
        /*主轴对齐方式： 左对齐（默认） |  右对齐  | 居中对齐 |     两端对齐  | 平均分布*/
 
    align-items:         flex-start    | flex-end | center   | baseline       | stretch;
        /*交叉轴对齐方式：顶部对齐（默认） | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
 
    align-content: flex-start      | flex-end | center   | space-between  | space-around | stretch;
        /*多主轴对齐：顶部对齐（默认） | 底部对齐   | 居中对齐  | 上下对齐并铺满  | 上下平均分布*/
}

子元素属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.item{
    order: <integer>; number
    /*排序：数值越小，越排前，默认为0*/
 
    flex-grow: <number>; /* default 0 */
    /*放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推）*/
 
    flex-shrink: <number>; /* default 1 */
    /*缩小：默认1（如果空间不足则会缩小，值为0不缩小）*/
 
    flex-basis: <length> | auto; /* default auto */
    /*固定大小：默认为0，可以设置px值，也可以设置百分比大小*/
 
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
    /*flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，*/
 
    align-self:         auto     | flex-start | flex-end | center   |  baseline      | stretch;
       /*单独对齐方式：自动（默认） | 顶部对齐   | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/
}

后记

  • 前面是使用过的解决方案后面这些是网上摘录的一些方法，侵权立删
  • 欢迎进入我的博客：https://yhf7.github.io/
  • 如果有什么侵权的话，请及时添加小编微信以及qq也可以来告诉小编（905477376微信qq通用），谢谢！
-------------本文结束感谢您的阅读-------------
0%