delphi tabsheet多标签自适应宽度_移动端自适应的三种方法总结

在移动端开发中，由于各个手机厂商生产的手机屏幕大小不一，为了使页面布局在不同大小屏幕的手机上能够适应，这个时候宽高就不能写死了。通过查找资料有两种，目前我知道有两种方法可以解决这种问题。

一、原生js实现rem布局

rem布局就派上用场了，最简单的用法可以这样，新建一个rem.js文件，用原生js在里面写上以下代码，在项目中就可以用rem来代替px了：

(function () {
  function resize () {
    let designWidth = 750 // 移动端设计稿标准宽度---》基于iphone6
    let baseFontSize = 100   // 设计稿100px相当于1rem， 750px --> 7.5rem ---> 各种屏幕的100%的宽度
    let width = window.innerWidth // 屏幕宽度
    let currentFontSize = (width / designWidth) * baseFontSize
    document.querySelector('html').style.fontSize = currentFontSize + 'px'
  }
  // 1.当屏幕缩小时会触发该事件
  window.onresize = function () {
    resize()
  }
  // 2.监听DOMContentLoaded事件， 当浏览器解析完文档触发该事件
  document.addEventListener('DOMContentLoaded', resize)
}())

这种方法有缺陷，每次还得自己去计算rem的值，比较繁琐，但是可以使用CSS的预处理器来简便操作，我用的是Stylus，因此我会这样写：

px2rem(designpx )
  $rem = 100px;
  return (designpx / $rem )rem

是不是方便了许多呢~

还有一种px转rem的方法是：在vscode中安装插件---cssrem，你写代码的时候会有提示，这个也很方便呢 最后还有一种px转rem的方案哦，可以在项目中安装插件npm install px2rem-loader，不过这种方式需要向项目中配置一下，配置方法也很简单：（ps： 我用的是vue-cli搭建的一个Vue项目）

setp1：

找到build文件夹下面的utils.js, 打开后添加px2remLoader这个对象，再找到generateLoaders这个函数，在cssLoader后面添加px2remLoader，可以按照我下面的配置。

var px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 75 /* 表示1rem的值 */
  }
}

function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader, px2remLoader]

二、通过插件实现rem布局

安装插件lib-flexible.js和px2remLoader：npm install px2rem-loader lib-flexible --save-dev。 px2remLoader的作用和使用方法上面已经说了，这里就不再重复了。

lib-flexible.js的作用

lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。

在main.js中引入： import 'lib-flexible'

三、通过viewport来实现移动端的自适应布局

这种方法比较新，看网上之前说可能存在兼容性问题，但是随着浏览器的发展，已经慢慢在兼容了，可以考虑使用这种方法来实现。使用vh/vw来布局，需要结合工具postcss-px-to-viewport。 一些概念和工具的配置可以移步这里：

移动端适配方案 viewport​www.jianshu.com