移动端布局

概念

只使用于移动端，不同设备等比例缩放

百分比布局

• 通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果

百分比的基准

值	基准
width	父元素的width
height	父元素的height
top / bottom	第一个非 static 定位的父元素的height
left / right	第一个非 static 定位的父元素的width
padding / margin	父元素的width
border-radius	自身的width
translate	自身的width

rem 布局

• rem 是基于根元素 html 的 font-size 来决定大小的

设计思想

1. 一般不要给元素设置具体的宽度，但是对于一些小图标可以设定具体宽度值
2. 高度值可以设置固定值，设计稿有多大，我们就严格有多大
3. 所有设置的固定值都用 rem 做单位（首先在 HTML 总设置一个基准值：px 和 rem 的对应比例，然后在效果图上获取 px 值，布局的时候转化为 rem 值)
4. js 获取真实屏幕的宽度，让其除以设计稿的宽度，算出比例，把之前的基准值按照比例进行重新的设定，这样项目就可以在移动端自适应了

js改变根元素font-size

let init = () => {
	let width = document.documentElement.clientWidth;
	document.documentElement.style.fontsize = width / 10 + 'px';
}
//首次加载是计算
init();

//添加监听，窗口发生变化时计算
window.addEventListener('resize', init);
window.addEventListener('orientationchange', init);

一般设计图的单位为 px，可以通过 postcss-pxtorem 自动把代码中的 px 转换为 rem

视口单位

单位	含义
vw	相对于视窗的宽度，1vw 等于视口宽度的1%，即视窗宽度是100vw
vh	相对于视窗的高度，1vh 等于视口高度的1%，即视窗高度是100vh
vmin	vw和vh中的较小值
vmax	vw和vh中的较大值

一般设计图的单位为 px，可以通过 postcss-pxtovw 自动把代码中的 px 转换为 vw