如何让二维码自适应浏览器的尺寸

一、遇到的问题：

---

 正常浏览网页，二维码正常显示，但是随着浏览器的扩大与缩小，二维码尺寸不会随着屏幕自适应                    

正常浏览（截取部分）：

                                                        

缩小浏览器（截取部分）：

                                                                               

 

二、解决办法：

---

1、了解qrcanvas-vue插件，https://gera2ld.github.io/qrcanvas-vue/#logo。只支持像素大小的二维码

2、qrcode支持移动端自定义大小二维码

"qrcode": "^1.2.2",
import QRCode from 'qrcode';

_this.urlData为请求过来的url地址

渲染：

var canvas = document.querySelector('canvas')
QRCode.toCanvas(canvas, this.urlData)

css:

生成二维码之后在canvas标签里有style样式（单位为px），!important的层级比style要高，实现自定义大小

.qrcode {
            width: 90% !important;
            height: 90% !important;
          }

三、效果：

---

正常浏览（截取部分）：

                                                                  

缩小浏览器（截取部分）：大小跟随着屏幕变大变小