移动端适配

304 阅读1分钟

u=785203408,1710312313&fm=253&fmt=auto&app=138&f=JPEG.webp

要在head标签中写入一个meta标签:

 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

Rem布局:

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

postcss-pxtorem(用于将 px 单位转化为 rem 单位) lib-flexible

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取最大值