移动端屏幕适配

最新推荐文章于 2024-09-03 11:34:18 发布

原创最新推荐文章于 2024-09-03 11:34:18 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html #css

本文介绍了移动端适配的三种方案：手写rem、使用postcss-pxtorem插件和vw/vh单位。详细讲解了rem布局的实现，包括设置动态html字体大小的js函数。还提到了lib-flexible库的使用，以及如何通过postcss配置将px转换为rem。此外，文章提及了vw和vh视窗单位的使用，并提供了一个安装依赖的示例。最后，讨论了postcss-px-to-viewport的安装和配置。

移动端适配方案

有三种：分别是手写rem、插件安装、vw和vh

rem的概念

rem是指相对于根元素的字体大小的单位，1rem等于html根元素font-size的px值

手写rem布局

<div class='head'>头部</div>
<style>
	.head {
		width:7.5rem;
		height:0.88rem
	}
</style>
<script>
	rem()
	// 页面大小发生变化就会触发这个函数
	window.onresize = function () {
		rem()
	}
	function rem() {
		// 获取html的宽度
		let hh = document.documentElement.clientWidth
		// 获取body的宽度
		let bh = document.body.clientWidth
		// 让宽度 赋值为 html或者body的宽度 
		// IE浏览器认为body为最大的 而其他的浏览器认为html为最大的
		let h = hh || bh
		// 给html设置动态的fontSize属性
		document.documentElement.style.fontSize = (h / 750 * 100) + 'px'
	}
</script>

rem适配方案

- 推荐使用以下两个工具:

1. postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

2. lib-flexible 用于设置 rem 基准值（设置1rem等于多少px）

安装依赖

cnpm install lib-flexible postcss-pxtorem --save-dev

在main.js中导入

 import 'lib-flexible/flexible';

postCss配置：
创建.postcssrc.js
这是个基础的，有需要的可以自行修改

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 75,
      propList: ['*']
    }
  }
}

因为我们用了 Vant 的组件，需要按照 rootValue: 37.5 来写样式
注意

这里会报错 postCss 需要8的版本（但是postCss 还没有8的版本)
所以这里建议对postcss-pxtorem进行降级

降级命令 npm install postcss-pxtorem@5.1.1 --save

vw和vh

vw 是视图宽度
vh 是视图高度
100vw 就是全屏的宽度

安装依赖

npm install postcss-px-to-viewport -D