屏幕适配

常见屏幕比例16:9（指的是宽为1920，高为1080的屏幕）
1、若是移动端，可用插件px转vw和vh，可以做到屏幕大小改变时，实时适应屏幕大小

postcss.config.js文件做适配

点击查看代码 
module.exports = {
  plugins: {
      autoprefixer: {},
      "postcss-px-to-viewport": {
          viewportWidth: 375, //视窗的宽度，对应的是我们设计稿的宽度
          viewportHeight: 1334, //视窗的高度，对应的是我们设计稿的高度,一般为1334。(也可以不配置)
          unitPrecision: 5, //指定`px`转换为视窗单位值的小数位数
          viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
          selectorBlackList: ['.ignore', '.hairlines'], //指定不需要转换的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
          minPixelValue: 1, // 小于或等于`1`px不转换为视窗单位
          mediaQuery: false, // 允许在媒体查询中转换`px`,
          propList: ['*']
      }
  }
}
2、rem适配
点击查看代码 
// 适合所有屏幕的适配情况，包括移动端和pc端及大屏
// 750是设计稿的宽度
(function () {
      var b = document.documentElement,
      a = function () {
          // a为屏幕的宽度,例如为375，则实际屏幕宽度比上设计稿的宽度为0.5，也就是说设计稿1px就相当于实际屏幕宽度0.5px
          // 所以在实际px书写时，是需要将测量的设计稿宽度乘以比例0.5，rem就正好符合，将html的字体大小设置为0.5px即可
          var a = b.getBoundingClientRect().width;
          // 乘以100是将比例放大100倍，因为浏览器规定字体大小不得小于12px，避免12px以下的字体不显示
          b.style.fontSize = (a / 750) * 100+ "px";
      }, 
      c = null;
      window.addEventListener("resize", function () {
          clearTimeout(c);
          c = setTimeout(a, 300);
      });
      a();
})();

注意：rem适配在项目初期就需要定，单位使用时直接使用rem，比如ui图的宽在1920，使用时则为19.20rem
rem做为单位时，只有在页面刷新完，根据新的比例去设置跟标签的字体大小，并不能实时改变

3、transform适配
点击查看代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		body{
			position: relative;
			/* background: #1EB743; */
		}
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 1920px;
			height: 1080px;
			position: absolute;
			background: #57A4FF;
		}
		.box .left{
			width: 450px;
			height: 478px;
			float: left;
			background: rgba(49, 150, 250, 1);
		}
		.box .right{
			float: right;
			width: 571px;
			height: 277px;
			background: rgba(49, 150, 250, 1);
			opacity: 0.9;
		}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="left">
				
			</div>
			<div class="center">
				
			</div>
			<div class="right">
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
		resize();
		function resize() {
			// 设计稿的宽高
			const defWidth = 1920;
			const defHeight = 1080;
			const pcH = document.documentElement.clientHeight;
			const pcW= document.documentElement.clientWidth;
			
			// const flag = pcW / defWidth > pcH / defHeight;
			const flag = pcH / pcW < defHeight / defWidth
			const dom = document.getElementsByClassName('box')[0];

			dom.style.width = defWidth + 'px';
			dom.style.height = defHeight + 'px';
			const scale = flag ? pcH / defHeight : pcW / defWidth;
			dom.style.transform = `scale(${scale})`
			const top = flag ? - (defHeight * (1 - scale)) / 2 : -((defHeight * (1 - scale)) / 2 - (pcH - defHeight * scale) / 2);
			const left = flag ? - ((defWidth * (1 - scale)) / 2 - (pcW - defWidth * scale) / 2) : -(defWidth * (1 - scale)) / 2;
			// const top  = flag? -((defHeight - pcH) / 2) : -((pcH - defHeight) / 2 );
			// const left = flag? -((defWidth - pcW) / 2) : -((pcW - defWidth) / 2);
			dom.style.top = `${top}px`;
			dom.style.left = `${left}px`;
		}
		window.onresize = function() {
			resize();
		};
	</script>
</html>

注意：这里的在适配用到了top和left，需要给该元素设置固定

posted @ 2022-03-07 18:17  ～柚子～  阅读(399)  评论(0)    收藏  举报