Vue项目中将rem替换px的操作是什�
Admin 2022-05-24 群英技术资�
基础点:rem相对根节点字体的大小。所以不用px;
根字体:字体的大小px;
px:你就当成cm(厘米)这样的东西吧�
基准�750设计稿(一般UI设计师给的都�750的设计稿);
vue-cli:使用脚手架来搭建vue前端项目
postcss:就是postcss用js插件帮你转换css样式的一个工具。比如,这里的把你的文件里面16px替换�1rem(根大小默�16px的情况);这样你就不用自己去算了�
cssrem:主要是帮你把px(UI设计给设计稿上的px)转换成对应的rem
然后:还要用js代码去动态算根目录应该有的字体大小,反正就是一段js代码去动态获取屏幕宽�
npm i postcss,postcss-pxtorem,postcss-loader,postcss-import,postcss-url
然后再index.html里面加上
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
module.exports = { "plugins": { "postcss-import": {}, //用于@import导入css文件 "postcss-url": {}, //路径引入css文件或node_modules文件 "postcss-aspect-ratio-mini": {}, //用来处理元素容器宽高� "postcss-write-svg": { utf8: false }, //用来处理移动�1px的解决。该插件主要使用的是border-image和background来做1px的相关处理� "postcss-cssnext": {}, //该插件可以让我们使用CSS未来的特性,其会对这些特性做相关的兼容性处理� "postcss-px-to-viewport": { //把px单位转换为vw、vh、vmin或者vmax这样的视窗单位,也是vw适配的核心插件之一� viewportWidth: 750, //视窗的宽� viewportHeight: 1334, //视窗的高� unitPrecision: 3, //将px转化为视窗单位值的小数位数 viewportUnit: 'vw', //指定要转换成的视窗单位� selectorBlackList: ['.ignore', '.hairlines'], //指定不转换视窗单位值得类,可以自定义,可以无限添加 minPixelValue: 1, //小于等于1px不转换为视窗单位 mediaQuery: false //允许在媒体查询中使用px }, "postcss-viewport-units":{}, //给vw、vh、vmin和vmax做适配的操�,这是实现vw布局必不可少的一个插� "cssnano": { //主要用来压缩和清理CSS代码。在Webpack中,cssnano和css-loader捆绑在一起,所以不需要自己加载它� preset: "advanced", //重复调用 autoprefixer: false, //cssnext和cssnano都具有autoprefixer,事实上只需要一个,所以把默认的autoprefixer删除掉,然后把cssnano中的autoprefixer设置为false� "postcss-zindex": false //只要启用了这个插件,z-index的值就会重置为1 } } }
当你切换不同尺寸的屏幕的时候,需要动态改变根字体的大小,一段简单的js插入在head里面:在public目录下直接新建的shipei.js,然后将这个js引入到index.html的head里面
//shipei.js (function() { function autoRootFontSize() { document.documentElement.style.fontSize = Math.min(screen.width,document.documentElement.getBoundingClientRect().width) / 750 * 32 + 'px'; // 取screen.width和document.documentElement.getBoundingClientRect().width的最小值;除以750,乘�32;懂的起撒,就是原本�750大小�32px;如果屏幕大小变成�375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化!是不是很简� } window.addEventListener('resize', autoRootFontSize); autoRootFontSize(); })();
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="/public.css" rel="external nofollow" type="text/css"> <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" > <title><%= htmlWebpackPlugin.options.title %></title> <script src="/shipei.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
注意 放到 public 里的东西,可以不用写开头目录,脚手架打包的时候找不到,会去public文件夹找�
getBoundingClientRect().width获取到的其实是父级的右边距离浏览器原�(0,0)左边距离浏览器原�(0,0)的距�,即父级的宽度+2padding+2border�
此时的clientWidth等于父级的宽�+2*padding,不包括边框的宽度�
当不隐藏子级内容,即overflow为auto时,前者的宽度依然为这个数�,因为父级并没有改编盒模型。后者的宽度为上述得到的宽度-滚动条的宽度(17px);
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } </style> </head> <body> <div id="divParent" style="background-color: #aaa; padding:8px; border:solid 7px #000; height:200px; width:500px; overflow:hidden;"> <div id="divDisplay" style="background-color: #0f0; margin: 30px; padding: 10px; height: 400px; width: 600px; border: solid 3px #f00;"> </div> </div> </body> </html> <script type="text/javascript"> /* getBoundingClientRect().width获取到的其实是父级的右边距离浏览器原�(0,0)左边距离浏览器原�(0,0)的距�,即父级的宽度+2padding+2border� 此时的clientWidth等于父级的宽�+2*padding,不包括边框的宽度� 当不隐藏子级内容,即overflow为auto时,前者的宽度依然为这个数�,因为父级并没有改编盒模型。后者的宽度为上述得到的宽度-滚动条的宽度(17px);例子如下: */ var divP = document.getElementById('divParent'); var divD = document.getElementById('divDisplay'); var clientWidth = divP.clientWidth; var getWidth = divP.getBoundingClientRect().width; divD.innerHTML += 'clientWidth: ' + clientWidth + '<br/>'; divD.innerHTML += 'getWidth: ' + getWidth + '<br/>'; </script>
运行结果是clientWidth�516,他的计算是内容宽+2padding
getWidth(也就是getBoundingClientRect().width)包括内容宽+2padding+2border
第五步:就是将设计稿上的px转换成rem为单位:安装 cssrem插件 (在插件市场)�
然后� 文件-->首选项-->设置 然后搜索cssrem 设置Root Font Size�16即可
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
这篇文章主要介绍了JavaScript时间复杂度和空间复杂度,时间复杂度和空间复杂度是衡量一个算法是否优秀的标准,通常我们比较两个算法时会用预先估算和事后统计,下文详细介绍,需要的朋友可以参考一�
vue+elementUI配置表格的列显示与隐藏,供大家参考,具体内容如下描述:表格的列过多时,可以根据需要控制列的显示与隐藏,目前是采用Vue+elementUI(适配Vue3的Element Plus)实现的,具体效果与代码如下:效果图:完整代码:template div id=app el-table :
这篇文章主要为大家介绍了vue� this.$set的使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
JavaScript中undefined和is not defined的区别与异常处理,一些朋友可能会遇到这方面的问题,对此在下文小编向大家来讲解一下,内容详细,易于理解,希望大家阅读完这篇能有收获哦,有需要的朋友就往下看吧!
目录data里面的数据相互使用具体代码如下data里的数据不能相互引用问题data里面的数据相互使用今天在写代码的时候,遇到一个问题,我想使用data里面的一个对象使用data里面的某个数据,附图片:我想让active的值给params对象里面的topicListType使用,我不想直接在一个方法里面改变这个值(想改�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078