Java , 前端全网资源链接 : 【长沙校区】集合Java,前端所有基础入门,重点问题一览帖

一、直接引入rem.js  

1，在src文件下面定义remConfig.js 文件

    export default function() {

        var deviceWidth = document.documentElement.clientWidth;

        if(deviceWidth > 750) {

            deviceWidth = 7.5 * 50;

        }

        document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';

        // 禁止双击放大

        document.documentElement.addEventListener('touchstart', function (event) {

            if (event.touches.length > 1) {

                event.preventDefault();

            }

        }, false);

        var lastTouchEnd = 0;

        document.documentElement.addEventListener('touchend', function (event) {

            var now = Date.now();

            if (now - lastTouchEnd <= 300) {

                event.preventDefault();

            }

            lastTouchEnd = now;

        }, false);

    }

2，在main.js 文件中引入remConfig.js 文件

import Vue from 'vue'

    import App from './App'

    import router from './router'

    import './config/remConfig.js'

    new Vue({

    el: '#app',

    router,

    render: c => c(App)

    })

3，定义index.css 文件

body {

        font-size: 0.32rem;

    }

4，在main.js 文件中引入 index.css 文件

    import './common/index.css'

二、借助px2rem 插件

• 安装
  npm install px2rem-loader  lib-flexible --save
• 在main.js 文件中引入
  import 'lib-flexible/flexible.js'
• 在build下的 utils.js中，找到generateLoaders 方法，在这里添加
  
  

const px2remLoader = {

        loader: 'px2rem-loader',

            options: {

                remUnit: 37.5

            }

        }

        function generateLoaders (loader, loaderOptions) {

            const loaders = [cssLoader, px2remLoader]

            if (loader) {

                loaders.push({

                loader: loader + '-loader',

                options: Object.assign({}, loaderOptions, {

                sourceMap: options.sourceMap

            })

        })

    }

4，重启项目 ，会发现自己设置的px被转为rem 了

   npm run dev

看一看，

一个人一座城0.0 发表于 2019-1-26 09:51
看一看，