当前位置:网站首页>移动端像素适配方案
移动端像素适配方案
2020-11-06 22:11:00 【进击的前端】
rem
1. 在 public文件夹的公共html添加配置
原理:在文件的根目录生成添加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 自动匹配vm, 使用第三方依赖包
postcss-px-to-viewport 在vue.config.js文件中配置:
const pxtovw = require('postcss-px-to-viewport')
module.exports = {
css: {
loaderOptions: {
css: {
// 这里的选项会传递给 css-loader
},
postcss: {
// 这里的选项会传递给 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/]
})
]
}
}
}
}
版权声明
本文为[进击的前端]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/4618999/blog/4706901
边栏推荐
- An article takes you to understand CSS gradient knowledge
- What is the meaning of sector sealing of filecoin mining machine since the main network of filecoin was put online
- ES6 learning notes (4): easy to understand the new grammar of ES6
- Will blockchain be the antidote to the global epidemic accelerating the transformation of Internet enterprises?
- Take you to learn the new methods in Es5
- 2020-09-04:函数调用约定了解么?
- Elasticsearch database | elasticsearch-7.5.0 application construction
- How to play sortable JS vuedraggable to realize nested drag function of forms
- Countdown | 2020 PostgreSQL Asia Conference - agenda arrangement of Chinese sub Forum
- 2020 database technology conference helps technology upgrade
猜你喜欢
2020-08-14:数据任务的执行引擎用的哪些?
jenkins安装部署过程简记
C calls SendMessage to refresh the taskbar icon (the icon does not disappear at the end of forcing)
git远程库回退指定版本
2020-08-29:进程线程的区别,除了包含关系之外的一些区别,底层详细信息?
Introduction to Huawei cloud micro certification examination
2020-08-30:裸写算法:二叉树两个节点的最近公共祖先。
【涂鸦物联网足迹】涂鸦云平台全景介绍
image operating system windows cannot be used on this platform
2020-08-24:什么是小文件?很多小文件会有什么问题?很多小文件怎么解决?(大数据)
随机推荐
Application insights application insights use application maps to build request link views
Multi robot market share solution
Code generator plug-in and creator preform file analysis
html+ vue.js Implementing paging compatible IE
What are the highlights of Huawei mate 40 series with HMS?
Junit测试出现 empty test suite
How much disk space does a new empty file take?
ES6 learning notes (5): easy to understand ES6's built-in extension objects
How to prepare for the system design interview
Zhou Jie: database system of East China Normal University
The role of theme music in games
The essence of transaction and the principle of deadlock
list转换map(根据key来拆分list,相同key的value为一个list)
STM32F030C6T6兼容替换MM32SPIN05PF
What grammar is it? ]
Kubernetes and OAM to build a unified, standardized application management platform knowledge! (Internet disk link attached)
An article taught you to download cool dog music using Python web crawler
Summary of front-end interview questions (C, s, s) that front-end engineers need to understand (2)
代码重构之法——方法重构分析
[forward] how to view UserData in Lua