行胜于言，自强不息！纸上得来终觉浅，绝知此事要躬行！
pc端屏幕显示设置缩放比例对页面布局的适配
利用device-pixel-ratio单独适配像素比@media all and (-moz-min-device-pixel-ratio: 1.09) and (-moz-max-device-pixel-ratio: 1.18), (-webkit-min-device-pixel-ratio: 1.09) and (-webkit-max-device-pixel-ratio: 1.18), (min-resolution: 1.09dppx) and (max-resolution: 1.18dppx) { :root { font-size: 14px; } } @media all and (-moz-min-device-pixel-ratio: 1.19) and (-moz-max-device-pixel-ratio: 1.28), (-webkit-min-device-pixel-ratio: 1.19) and (-webkit-max-device-pixel-ratio: 1.28), (min-resolution: 1.19dppx) and (max-resolution: 1.28dppx) { :root { font-size: 13px; } } @media all and (-moz-min-device-pixel-ratio: 1.29) and (-moz-max-device-pixel-ratio: 1.4), (-webkit-min-device-pixel-ratio: 1.29) and (-webkit-max-device-pixel-ratio: 1.4), (min-resolution: 1.29dppx) and (max-resolution: 1.4dppx) { :root { font-size: 12px; } } @media all and (-moz-min-device-pixel-ratio: 1.41) and (-moz-max-device-pixel-ratio: 1.6), (-webkit-min-device-pixel-ratio: 1.41) and (-webkit-max-device-pixel-ratio: 1.6), (min-resolution: 1.41dppx) and (max-resolution: 1.6dppx) { :root { font-size: 10px; } } @media all and (-moz-min-device-pixel-ratio: 1.61) and (-moz-max-device-pixel-ratio: 1.8), (-webkit-min-device-pixel-ratio: 1.61) and (-webkit-max-device-pixel-ratio: 1.8), (min-resolution: 1.61dppx) and (max-resolution: 1.8dppx) { :root { font-size: 9px; } } @media all and (-moz-min-device-pixel-ratio: 1.81) and (-moz-max-device-pixel-ratio: 2.1), (-webkit-min-device-pixel-ratio: 1.81) and (-webkit-max-device-pixel-ratio: 2.1), (min-resolution: 1.81dppx) and (max-resolution: 2.1dppx) { :root { font-size: 8px; } } vue解决办法mounted () { this.handleScreen() window.onresize = () => { this.handleScreen() } }, methods: { handleScreen(){ const zoom = this.detectZoom(); console.log(zoom, 'MMMMMMMMMMMMMMM') const scale = 100 / Number(zoom); console.log('scale', scale, typeof scale) }, detectZoom () { let ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) { ratio = window.devicePixelRatio; } else if (~ua.indexOf('msie')) { if (screen.deviceXDPI && screen.logicalXDPI) { ratio = screen.deviceXDPI / screen.logicalXDPI; } } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) { ratio = window.outerWidth / window.innerWidth; } if (ratio) { ratio = Math.round(ratio * 100); } return ratio; }, }
首先安装vue-i18n包新建locales/i18n.js文件/** * Created by liweiliang 406320591@QQ.com on 2022/10/14 15:16. */ import Vue from "vue"; import VueI18n from "vue-i18n"; import elementZhLocale from "element-ui/lib/locale/lang/zh-CN"; // element-ui lang import elementEnLocale from "element-ui/lib/locale/lang/en"; // element-ui lang import enLocale from "./lang/enLocale"; import zhLocale from "./lang/zhLocale"; const messages = { en: { ...enLocale, ...elementEnLocale, }, zh: { ...zhLocale, ...elementZhLocale, }, }; /** * i18n 配置 * @param locale 本地化语言 * @param fallback 回退语言 * @returns {VueI18n} */ function initI18n(locale, fallback) { Vue.use(VueI18n); let i18nOptions = { locale, fallbackLocale: fallback, silentFallbackWarn: true, messages, }; return new VueI18n(i18nOptions); } export { initI18n }; locales/lang/zhLocale.js文件/** * Created by liweiliang 406320591@QQ.com on 2022/10/17 14:11. */ const zhModulesFiles = require.context("./zh", true, /\.js$/); const zhLang = zhModulesFiles.keys().reduce((modules, modulePath) => { const value = zhModulesFiles(modulePath); modules = { ...modules, ...value.default }; return modules; }, {}); export default zhLang; locales/lang/enLocale.js文件main.js引入import { initI18n } from "@/locales/i18n"; const i18n = initI18n(Cookies.get('language') || 'en', "en"); new Vue({ el: '#app', router, store, i18n, render: h => h(App) })
vue 项目启动报错：Syntax Error: Unexpected token 的解决方法
vue项目根目录新增配置文件 .babelrc{ "presets": [ "stage-2" ] } 修复好 Syntax Error: Unexpected token 启动发现又报如下问题Failed to compile with 9 errors Module build failed: Error: No PostCSS Config found in: D:\project\ 根目录新建postcss.config.js/** * Created by liweiliang 406320591@QQ.com on 2022/11/1 14:10. */ module.exports = { plugins: { autoprefixer: {browsers: 'last 5 version'} } }