当前位置:网站首页>Mobile pixel adaptation scheme
Mobile pixel adaptation scheme
2020-11-06 22:11:00 【The front end of the attack】
rem
1. stay public Public of folder html Add the configuration
principle : Create and add in the root directory of the file font-size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<script>
(function (w) {
var doc = w.document;
var docEl = doc.documentElement;
var timer;
function refersh() {
var width = docEl.getBoundingClientRect().width;
if (width > 750) {
width = 750;
}
var rem = width / 7.5;
docEl.style.fontSize = rem + "px";
}
w.addEventListener('resize', function () {
timer && clearTimeout(timer);
timer = setTimeout(refersh, 400)
})
w.addEventListener('pageshow', function () {
timer && clearTimeout(timer);
timer = setTimeout(refersh, 400)
})
})(window)
</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
2.
vm
vue-cli Automatic matching vm, Using third-party dependency packages
postcss-px-to-viewport stay vue.config.js Configuration in file :
const pxtovw = require('postcss-px-to-viewport')
module.exports = {
css: {
loaderOptions: {
css: {
// The options here are passed to css-loader
},
postcss: {
// The options here are passed to postcss-loader
plugins: [
new pxtovw({
unitToConvert: 'px',
viewportWidth: 375,
unitPrecision: 5,
propList: ['*'],
viewportUnit: 'vw',
fontViewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: [/node_modules/]
})
]
}
}
}
}
版权声明
本文为[The front end of the attack]所创,转载请带上原文链接,感谢
边栏推荐
- 上海巨微专用蓝牙广播芯片
- MRAM高速缓存的组成
- The method of local search port number occupation in Windows system
- 【涂鸦物联网足迹】物联网基础介绍篇
- 2020-08-30:裸写算法:二叉树两个节点的最近公共祖先。
- 小程序商城系统插件代码该如何写?怎么用代码检查添加插件是否成功?
- Application insights application insights use application maps to build request link views
- Git remote library rollback specified version
- 2020-08-14:数据任务的执行引擎用的哪些?
- 移动端像素适配方案
猜你喜欢
移动端像素适配方案
What kind of music do you need to make for a complete game?
Event monitoring problem
All the way, I was forced to talk about C code debugging skills and remote debugging
JVM memory allocation - xms128m - xmx512m - XX: permsize = 128M - XX: maxpermsize = 512M
Junit测试出现 empty test suite
Introduction to Huawei cloud micro certification examination
The use of Xunwei imx6 development board device tree kernel menuconfig
ado.net and asp.net The relationship between
Message queue - Analysis
随机推荐
Practice of Xiaoxiong school development board: real equipment access of smart street lamp sandbox experiment
Js字符串-String字符串对象方法
How much disk space does a new empty file take?
Road to simple HTML + JS to achieve the most simple game Tetris
Count the number of project code lines
2020-09-09:裸写算法:两个线程轮流打印数字1-100。
Reserved battery interface, built-in charge and discharge circuit and electricity meter, quickly help easily handle hand-held applications
Zero basis to build a web search engine of its own
How much disk space does a file of 1 byte actually occupy
Google browser realizes video playback acceleration function
Introduction to Huawei cloud micro certification examination
Stickinengine architecture 11 message queue
轻量型 GPU 应用首选 京东智联云推出 NVIDIA vGPU 实例
Erd-online free online database modeling tool
C language I blog assignment 03
2020-08-29: process thread differences, in addition to the inclusion relationship, the underlying details?
Js数组-数组的用法全在这里(数组方法的重构、数组的遍历、数组的去重,数组的判断与转换)
上海巨微专用蓝牙广播芯片
Metersphere developer's Manual
2020-09-04:函数调用约定了解么?