Customizing font sizes leads to page clutter

  • Rem layout is used in the project. When users change the font size of the mobile phone system or wechat browser, the page style will be confused. Therefore, it is forbidden for users to scale the font reference link
// reset_font_size.js
(function () {
  if (typeof WeixinJSBridge === 'object' && typeof WeixinJSBridge.invoke === 'function') {
    handleFontSize()
  } else {
    if (document.addEventListener) {
      document.addEventListener('WeixinJSBridgeReady', handleFontSize, false)}else if (document.attachEvent) {
      document.attachEvent('WeixinJSBridgeReady', handleFontSize)
      document.attachEvent('onWeixinJSBridgeReady', handleFontSize)
    }
  }

  function handleFontSizeInvoke () {// set the web page font to the default size.'setFontSizeCallback', {
      'fontSize': 0}) // Override the event weixinjsbridge-on ('menu:setfont'.function () {
      WeixinJSBridge.invoke('setFontSizeCallback', {
        'fontSize': 0})})}})()Copy the code

Move 1px quadrangle border

The business scenario is shown in the figure

.qrcode_wrapper {
        background: linear-gradient(to left, #f30b03, #f30b03) left top no-repeat, linear-gradient(to bottom, #f30b03, #f30b03) left top no-repeat, linear-gradient(to left, #f30b03, #f30b03) right top no-repeat, linear-gradient(to bottom, #f30b03, #f30b03) right top no-repeat, linear-gradient(to left, #f30b03, #f30b03) left bottom no-repeat, linear-gradient(to bottom, #f30b03, #f30b03) left bottom no-repeat, linear-gradient(to left, #f30b03, #f30b03) right bottom no-repeat, linear-gradient(to left, #f30b03, #f30b03) right bottom no-repeat;background-size: 2px 20px, 20px 2px, 2px 20px, 20px 2px; <! --transform: scale(.5); -- > <! --zoom: .5; -->#qrcode_img {
          width: 200px;
          height: 200px;
        }

        .qrcode_desc {
          font-size: 13px;
          color: #f30b03;text-align: center; }}Copy the code
  • transform: scale(.5)It takes up space before scaling and affects the layout of other elements
  • zoom: .5;Due to the REM layout,zoom does not work on the mobile side
  • Violent solution: 1.1px (if you have a good solution, welcome to correct)

Html2canvas image drawing problem

import VueHtml2Canvas from 'vue-html2canvas'// Must be used with vue-html2canvas! // index.js? d1e0:1 Uncaught ReferenceError: regeneratorRuntime is not defined import regeneratorRuntime from'regenerator-runtime' 
Copy the code

The background-image in the package file is a local file

  • Because of the multi-page application of customized sharing and other requirements of wechat web development project, the dist directory structure after packaging is different from the default DIST structure, so the publicPath of ExtractTextWebpackPlugin needs to be separately configured and adjusted freely according to the directory structure. Refer to the link
├─ ├─ img ├─ js // default generated file ├─ index.html ├─ ├─ img ├─ jsCopy the code
/ / this project multi-page application generating project directory structure dist ├ ─ ─ page1 └ ─ ─ page1. HTML ├ ─ ─ page2 └ ─ ─ page2. HTML └ ─ ─ the static ├ ─ ─ CSS ├ ─ ─ page1 └ ─ ─ page1. CSS ├ ─ ─ Page2 └─ page2. CSS ├─ img ├─ jsCopy the code
// Modify the configuration under build/util.jsif (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '.. /.. /.. / '// Configure according to the project structure})}else {
      return ['vue-style-loader'].concat(loaders)
    }
Copy the code

Charles grabs HTTPS and displays unknown solution