二十一.移动端适配

46 阅读1分钟

rem布局 rem原理:所有的尺寸相关的单位用rem,它是一个相对单位,相对于html的font-size,然后我们就可以通过js根据当前屏幕宽度来设置html的合适的font-size大小,这样页面就会等比例缩放

涉及到的两个插件:postcss-pxtorem(用于将 px 单位转化为 rem 单位) lib-flexible

viewport布局 或 vw布局 只要一个插件就行了 postcss-px-to-viewport 可以实现把px转换成vw单位

vw/vh/px/em/rem/vmin/vmax区别

px是绝对单位 量出来就是多少 em是相对单位 相对于父元素的font-size 一般是用来做首行缩进 text-indent:2em rem是相对单位,相对于html的font-size 一般是用来做移动端适配 vw,vh 它们是把视图分为100份,1vw就是视口宽度的百分之一 vh就是视口高度的百分之一 一般的用来做移动端适配 vmin,vmax vmin取宽和高最小值 vmax取最大值