关于移动端的尺寸适配,vscode中支持自动转换的插件

引言:

在移动端开发,通常要为不同尺寸的设备进行尺寸的适配,比如盒子的大小会用相对的尺寸来定义,比如百分比,再者是rem相对尺寸,rem是根据根元素html设定的font-size来决定权重的,比如默认的font-size是16px,那么1rem=16px,那么你在编写样式的时候,通过计算像素来获得对应rem,这样尺寸变化也不会影响布局。还有一种则是视口viewport,简写为vw,viewport仅用于对页面中以px为单位的尺寸大小的缩小和放大,以抛开设备物理像素,以更舒适的像素去显示。

1媒体查询

概念:为不同的屏幕尺寸设定不同的css样式
基本用法:

div{
	width:100px;
	height:100px;
	background-color:#balck;
}
@media screen and (min-device-width:200px) and (max-device-width:300px){
	div{
		background-color:#red
	}
}
@media screen and (min-device-width:301px) and (max-device-width:400px){
	div{
		background-color:#blue
	}
}

这部分代码表示当屏幕宽度在200-300px之间的时候div背景色为红色,当屏幕宽度在301-400px之间div背景色为蓝色。

媒体查询的引入方式

style标签

<style media="(min-device-width:200px) and (max-device-width:300px)">样式</style>

link引入

<link href="index.css" media="(min-device-width:200px) and (max-device-width:300px)">

当屏幕尺寸在200-300之间时,使用index.css样式

2移动端的尺寸适配

下面介绍的是一种个人最为推荐的尺寸适配方案,那就是利用vscode插件amfe-flexible 、postcss-load-config、postcss-px-to-viewport
安装命令分别为:

npm i -S amfe-flexible
npm i -D postcss-load-config
npm i -D postcss-px-to-viewport

可以在npm资源区查看相关介绍和功能:npm资源官网 这里有非常丰富的资源。
安装完插件之后需要创建一个配置文件.postcssrc.js(命名自己取)配置如下:

module.exports = {
    "plugins": {
      "postcss-px-to-viewport": {
        viewportWidth: 375 * 10, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750
        viewportHeight: 667, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
        unitPrecision: 2, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
        viewportUnit: 'rem', // 指定需要转换成的视窗单位,建议使用vw
        fontViewportUnit: 'rem',// vmin is more suitable.
        selectorBlackList: ['px'], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
  
        // fix:兼容性问题
        minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
        mediaQuery: false // 允许在媒体查询中转换`px`
      }
    }
  }

然后可以在调试工具中更改尺寸看看根元素的font-size是否改变:
在这里插入图片描述
在这里插入图片描述
可以看到iphoneX 和iPhone6的尺寸对应的fong-size也相应改变了,这个时候你在编码时就可以放心的写常用单位px就可以了。

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页

打赏作者

BBC蟹耳总

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值