移动端适配

宇世无情

于 2023-04-02 14:28:27 发布

阅读量65

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_47258443/article/details/129910586

版权

1.postcss.config.js
	  vscode：像素单位转换插件：px to rem
	  1.下载amfe-flexiable，postcss-pxtorem插件
	  
	  2.在main.js中引入import 'amfe-flexiable'
	  
	  3.在src同级下创建postcss.config.js文件
	  module.exports={
	  	plugins:[
	  		require('postcss-pxtorem')({
	  			rootValue:37.5,//表示1rem为37.5						像素
	  			proplist:['*']	,//*表示所有属性都要转换
	  			exclude:/node_modules/i
	  //不处理modules下的内部文件
	  		})
	  	]
	  }
	  
	  详情连接：https://blog.csdn.net/weixin_43550562/article/details/122826493

2.rem+vw

	  如果设计搞稿是750就将跟标签设置为：
	  <html lang="" style="font-size: 13.333333vw;">
	
	  如果设计搞稿是375就将跟标签设置为：
	  <html lang="" style="font-size: 26.666666vw;">
	  
	  然后设置像素的时候将设计稿的值除以100即可。

      图片失真问题

	  1.image中的srcset属性设置
	  
	  2.使用svg格式的图片