简单手写实现函数组件的Ref - forwardRef

最新推荐文章于 2025-07-22 14:26:57 发布

原创最新推荐文章于 2025-07-22 14:26:57 发布 · 262 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

本文介绍了两种移动端适配方案：rem+flexible和viewport适配，并提及了postcss配置和适配代码的细节。同时，文章还推荐了一份关于Vue开发的详细技巧文档，包含36个知识点。

方案一：rem+flexible

postcss配置

 "postcss": {"plugins": {// 将css文件中的px转换成rem,autoprefixer是加上各种浏览器前缀"postcss-px2rem": {// UI图片的基准值 750px就是75,640px就是64,默认为75 "remUnit": 37.5,"remPrecision": 6, //准换成rem后的小数点精确数位 默认为6 "baseDpr": 2, //基准device pixel ratio值 默认为2 },"autoprefixer": {"overrideBrowserslist": ["Android 4.1","iOS 7.1","Chrome > 31","ff > 31","ie >= 8"]}}},"postcss-pxtorem": {"rootValue": 50, // 根元素字体大小"propList": ["*"]},

适配代码

import 'amfe-flexible/index.js'

const baseSize = 100 // 这个是设计稿中1rem的大小。
function setRem () {// 实际设备页面宽度和设计稿的比值const scale = (document.documentElement.clientWidth || document.body.clientWidth) / 750// 计算实际的rem值并赋予给html的font-sizedocument.documentElement.style.fontSize = (baseSize * scale) + 'px'
}
setRem()
window.addEventListener('resize', () => {setRem()
})

提示 : 当脱离掉node_modules重新npm install项目依赖时还是需要重新修改一遍的，谨记！

// rem适配
// rem适配原理，改变了一个元素在不同设备上占据的css像素的个数
// 优点：没有破坏完美视口 
// 缺点：px值到rem值到转换太复杂
(function(){
 var styleNode = document.createElement("style");var w = document.documentElement.clientWidth / 16;styleNode.innerHTML = "html{font-size:" + w + "px!important}";document.head.appendChild(styleNode)
})()

方案二：viewport 适配

/* viewport 适配的原理，viewport适配方案中，每一个元素在不同设备上占据的css像素的个数是一样的，
但是css像素和物理像素的比例是不一样的，等比的。
优点：所量即所得
缺点：没有使用完美视口*/
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width"><title>Document</title>
</head>
<body>

</body>
<script type="text/javascirpt"> (function(){var targetW = 640;var scale = document.documentElement.clientWidth/targetW;var meta=document.querySelector("meta[name='viewport'");meta.content = "initial-scale="+scale + ",minimum-scale="+ scale + ",maximum-scale="+scale+",user-scalable=no";})() </script>
</html>