如何讓二維碼自適應瀏覽器的尺寸

一、遇到的問題：

---

 正常瀏覽網頁，二維碼正常顯示，但是隨着瀏覽器的擴大與縮小，二維碼尺寸不會隨着屏幕自適應                    

正常瀏覽（截取部分）：

                                                        

縮小瀏覽器（截取部分）：

                                                                               

 

二、解決辦法：

---

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

2、qrcode支持移動端自定義大小二維碼

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

<canvas class="qrcode"></canvas>

_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;
          }

三、效果：

---

正常瀏覽（截取部分）：

                                                                  

縮小瀏覽器（截取部分）：大小跟隨着屏幕變大變小