sass/scss写移动端自适应样式,将px转化为rem

1. 将html的字体大小设置为37.5px；

众所周知,UI设计师是根据ip6的手机尺寸画的设计图,所以一般html宽是375px,所以将html的font-size写为37.5px;

html{
  font-size: 37.5px;
}

2. 使用scss语法（px的数值 / 37.5 + rem单位）

然后在style标签(记得写lang="scss")中:

@function px2rem($px) {
	$item: 37.5px;
	@return $px/$item+rem;
}
//使用方式
div {
  width: px2rem(100px);
}

然后在chrome浏览器中查看样式可知转化为rem的单位了,移动端也自适应了

3. 期望的37.5px的html的值是通过把容器宽度 / 10 + px单位获取的

注意： 最好在resize时间再重新给html的font-size赋值， 以免页面变形

但是实际客户手机的尺寸是多种多样的,所以最好是不要写死html的font-size,可以使用js控制font-size的大小,其他步骤同上

//获取屏幕宽度(viewport)
let htmlWidth = document.documentElement.clientWidth ||
document.body.clientWidth;
console.log(htmlWidth);
//获取htmlDom
let htmlDom = document.getElementsByTagName('html')[0];
//设置html的font-size
htmlDom.style.fontSize = htmlWidth/10+'px';

window.addEventListener('resize',(e)=>{
	let htmlWidth = document.documentElement.clientWidth ||
	document.body.clientWidth;
	console.log(htmlWidth);
	//获取htmlDom
	let htmlDom = document.getElementsByTagName('html')[0];
	//设置html的font-size
	htmlDom.style.fontSize = htmlWidth/10+'px';
})

4. 使用vw给html的font-size赋值

除了js的方法,css的100vw代表的是屏幕宽度,将html的font-size设置为10vw,这样html的font-size就由设备自动计算,多种尺寸不用愁

html {
	font-size: 10vw;
}

至于检验的方法,可以使用375px宽度转化为rem查看效果:

textarea {
  border: 1px solid #000;
  width: px2rem(375px);
  height: px2rem(100px);
  box-sizing: border-box;
}

将chrome浏览器模式调整为responsive拉伸查看效果图如下: