您现在的位置是：主页 > news > 网站给他人做付刑事责任/百度一下网页版
网站给他人做付刑事责任/百度一下网页版
admin2025/5/3 15:02:54【news】
简介网站给他人做付刑事责任,百度一下网页版,网站模版下载,类似稿定设计的网站参考文档 vant组件库移动适配方案 有待验证，看起来比较靠谱 vue项目移动端适配解决方法 使用 rem 单位进行适配，推荐使用以下两个工具： lib-flexible postcss-pxtorem 注意：因为lib-flexible主要用于手机自适应，当…
参考文档
vant组件库移动适配方案
有待验证，看起来比较靠谱
vue项目移动端适配解决方法
使用 rem 单位进行适配，推荐使用以下两个工具：
lib-flexible
postcss-pxtorem
注意：因为lib-flexible主要用于手机自适应，当屏幕尺寸大于540px时，它设置html标签的font-size固定为54px，并不能根据屏幕尺寸调整html标签的font-size的大小，所以如果还想适配电脑端可以修改源码
vue项目移动端、pc端适配方案（px转rem）
1，安装 lib-flexible 和 postcss-pxtorem
npm install lib-flexible --savenpm install postcss postcss-pxtorem --save-dev
简要介绍这两个包的用途：
lib-flexible会为页面根据屏幕自动添加<meta name='viewport' >标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。
postcss-px2rem会将px转换为rem用于适配不同宽度的屏幕，根据<html>标签的font-size值来计算出结果，即1rem=html标签的font-size值。（具体可自行百度单位rem的定义）
2， 引入lib-flexible
在项目入口文件main.js 中引入lib-flexible
import 'lib-flexible'
注意事项 由于lib-flexible会动态给页面header中添加<meta name='viewport' >标签，所以务必请把目录 public/index.html 中的这个标签删除！！！
3，配置postcss-pxtorem
在项目根目录创建postcss.config.js
具体配置内容如下：
// postcss.config.js
module.exports = {plugins: {// postcss-pxtorem 插件的版本需要 >= 5.0.0'postcss-pxtorem': {rootValue({ file }) {return file.indexOf('vant') !== -1 ? 37.5 : 75;},propList: ['*'],},},
};
注意：这样当遇到vant组件，rootValue值为37.5，而其他我们自己的样式文件rootValue值为75，这样当设计稿为750px时就可以一比一写样式了。
4，postcss-pxtorem切换版本
当进行项目启动，会发现报错，查了原因可能是版本不匹配。
所以切换postcss-pxtorem的版本
npm i postcss-pxtorem@5.1.1 --save-dev
到此，项目的移动适配就完成了。
注意事项
1、不使用行内样式
对于行内样式，阿里手淘并不能将px转rem，所以对于需要自适应的样式，如font-size、width、height等请不要写在行内。同理，对于不需要转化的样式可以写在行内，或者使用PX（大写）作为单位。
2、字号不使用rem
我们都知道chrome的最小显示的字体是12px，如果字体用rem，计算出来小于12px，那么就也会以12px显示，而且我们不希望出现13px或者15px这样的奇葩尺寸，所以字体最好是用PX（大写）来表示，至于适应，我们可以写媒体查询。
.item {border-bottom: 1PX #8d8d8d dashed;font-size: 12PX;line-height: 16PX;@media screen and (min-width: 576PX) {font-size: 14PX;line-height: 18PX;}@media screen and (min-width: 768PX) {font-size: 16PX;line-height: 28PX;}@media screen and (min-width: 992PX) {font-size: 16PX;line-height: 32PX;}@media screen and (min-width: 1200PX) {font-size: 18PX;line-height: 64PX;}
}
