快盘下载:好资源、好软件、快快下载吧!

快盘排行|快盘最新

当前位置:首页软件教程电脑软件教程 → vue的移动端响应式尺寸单位配置/二倍图

vue的移动端响应式尺寸单位配置/二倍图

时间:2022-09-28 16:46:04人气:作者:快盘下载我要评论


一般呢现在主要是:vw,vh,%来实现响应式的单位换算。
而rem需要通过 html的 font-size计算得到。通过一个基准值:iphone6的尺寸页面375像素。实际的像素为750px。2倍图布局。
根目录下面的文件,如果有修改则一定要重启项目

使用插件使得px转为rem

postcss模块,但是vue已经安装好了,所以你就直接装它的一些扩展postcss-pxtorem 是一款 PostCSS 插件,用于将 px 单位转化为 rem 单位lib-flexible 用于设置 rem 基准值
npm i -D postcss-pxtorem@5   注意版本,vue自带的支持是5版本
npm i -S amfe-flexible 阿里出一个类库,解决html中的font-size基准值
// main.js中引入
import 'amfe-flexible'

// 建立一个postcss.config.js
module.exports = {
plugins: {
'postcss-pxtorem': {// 需要安装 npm i -D postcss-pxtorem@5
rootValue: 37.5,// html中的font-size以多少为基准
// vant组件库,它就是以2倍图来布局,所以这里写37.5
propList: ['*'],
// 把所有写在.css或.scss文件中的px转为rem,内联样式中的px不会转
},
},
};


相关文章

  • CSS3图片鼠标悬停动画js特效

    CSS3图片鼠标悬停动画js特效,CSS3图片鼠标悬停动画特效。该特效在鼠标悬停到图片上面的时候,利用CSS3制作上下关门的动画效果,非常炫酷。...
  • Nginx 的 6 大应用场景!

    Nginx 的 6 大应用场景!,今天给大家分享一下关于Nginx的6大常见运用场景,学会之后就能直接上手用起来~~~一、HTTP服务器Nginx本身也是一个静态资源的服务器,当只有静态资源的时候,就可以使用Nginx来做服务器,如果一个网站只是静态页面的话,那么就可以通过这种方式来实现部署。1、首先在文档根目录​​Docroot(/usr/local/var/www)​​下创建html目录,然后在html中放一个test.h...

网友评论

快盘下载暂未开通留言功能。

关于我们| 广告联络| 联系我们| 网站帮助| 免责声明| 软件发布

Copyright 2019-2029 【快快下载吧】 版权所有 快快下载吧 | 豫ICP备10006759号公安备案:41010502004165

声明: 快快下载吧上的所有软件和资料来源于互联网,仅供学习和研究使用,请测试后自行销毁,如有侵犯你版权的,请来信指出,本站将立即改正。