likes
comments
collection
share

我家等离子电视也能用的移动端适配方案

作者站长头像
站长
· 阅读数 15

前几天我的领导“徐江”让我把一个移动端项目做一下适配，最好让他在家用等离子电视也能看看效果，做不出来就给我“埋了”，在这种情况下才诞生了这篇文章～

什么是移动端适配

移动端适配是指在不同尺寸的移动端设备上，页面能相对达到合理的显示或者保持统一的等比缩放效果

移动端适配的两个概念

  1. 自适应：根据不同的设备屏幕大小来自动调整尺寸、大小
  2. 响应式：会随着屏幕的实时变动而自动调整，是一种自适应

我家等离子电视也能用的移动端适配方案 而在我们日常开发中自适应布局在pc端和移动端应用都极为普遍，一般是针对不同端分别做自适应布局，如果要想同时兼容移动端和pc端，尤其是等离子电视这样的大屏幕，那么最好还是使用响应式布局~

移动端适配-视口（viewport）

在一个浏览器中，我们可以看到的区域就是视口（viewport）,我们在css中使用的fixed定位就是相对于视口进行定位的。 在pc端的页面中，我们不需要对视口进行区分，因为我们的布局视口和视觉视口都是同一个。而在移动端是不太一样的，因为我们的移动端的网页往往很小，有可能我们希望一个大的网页在移动端上也可以完整的显示，所以在默认情况下，布局视口是大于视觉视口的。

  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  </style>
  <body>
    <div class="box"></div>
  </body>

pc端展示效果 我家等离子电视也能用的移动端适配方案

移动端展示效果 我家等离子电视也能用的移动端适配方案 从上图可以看出在移动端上同样是100px的盒子，但是却没有占到屏幕的1/3左右的宽度，这是因为在大部分浏览器上，移动端的布局视口宽度为980px，我们在把pc端的页面切换成移动端页面时，右上角也短暂的显示了一下我们的布局视口是980px x 1743px。 所以在移动端下，我们可以将视口划分为3种情况：

  1. 布局视口（layout viewport）
  2. 视觉视口（visual layout）
  3. 理想视口（ideal layout）

这些概念的提出也是来自于ppk，是一位世界级前端技术专家。 贴上大佬的文章链接quirksmode.org/mobile/view…

我家等离子电视也能用的移动端适配方案 所以我们相对于980px布局的这个视口，就称之为布局视口（layout viewport），而在手机端浏览器上，为了页面可以完整的显示出来，会对整个页面进行缩小，那么显示在可见区域的这个视口就是视觉视口（visual layout）。

我家等离子电视也能用的移动端适配方案

我家等离子电视也能用的移动端适配方案 但是我们希望设置的是100px就显示的是100px，而这就需要我们设置理想视口（ideal layout）。

// initial-scale：定义设备宽度与viewport大小之间的缩放比例
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

移动端适配方案

  1. 百分比设置
  2. rem单位+动态html的font-size
  3. flex的弹性布局
  4. vw单位

在我们移动端适配方案中百分比设置是极少使用的，因为相对的参照物可能是不同的，所以百分比往往很难统一，所以我们常常使用的都是后面3种方案。

rem单位+动态html的font-size

rem单位是相对于html元素的font-size来设置的，所以我们只需要考虑2个问题，第一是针对不同的屏幕，可以动态的设置html不同的font-size，第二是将原来的尺寸单位都转换为rem即可。

talk is cheap, show me the code

/*
* 方案1:媒体查询 
* 缺点：需要针对不同的屏幕编写大量的媒体查询，且如果动态的修改尺寸，不会实时的进行更新
*/
<style>
    @media screen and (min-width: 320px) {
      html {
        font-size: 20px;
      }
    }
    @media screen and (min-width: 375px) {
      html {
        font-size: 24px;
      }
    }
    @media screen and (min-width: 414px) {
      html {
        font-size: 28px;
      }
    }
    .box {
      width: 5rem;
      height: 5rem;
      background-color: orange;
    }
</style>

<body>
    <div class="box"></div>
</body>
/*
* 方案2:编写js动态设置font-size
*/
<script>
  const htmlEl = document.documentElement;

  function setRem() {
    const htmlWidth = htmlEl.clientWidth;
    const htmlFontSize = htmlWidth / 10;
    htmlEl.style.fontSize = htmlFontSize + "px";
  }
  //  第一次不触发，需要主动调用
  setRem();

  window.addEventListener("resize", setRem);
</script>

<style>
  .box {
    width: 5rem;
    height: 5rem;
    background-color: orange;
  }
</style>

<body>
    <div class="box"></div>
</body>

但是写起来感觉还是好麻烦，如果可以的话我希望白嫖-0v0-

我家等离子电视也能用的移动端适配方案 所以我选择 postcss-pxtorem，vscode中也可以下载到相关插件哦，一鱼多吃，😁

vw单位

/*
* 方案1:手动换算
*/
<style>
  /** 设置给375的设计稿 */
  /** 1vw = 3.75px */
  .box {
    width: 26.667vw;
    height: 26.667vw;
    background-color: orange;
  }
</style>

/*
* 方案2:less/scss函数 
*/
@vwUnit: 3.75;

.pxToVw(@px) {
  result: (@px / @vwUnit) * 1vw;
}
.box {
  width: .pxToVw(100) [result];
  height: .pxToVw(100) [result];
  background-color: orange;
}

当然白嫖党永不言输，我选择 postcss-px-to-viewport，贴一下我的配置文件～

module.exports = {
  plugins: {
    "postcss-px-to-viewport": {
      unitToConvert: "px", //需要转换的单位，默认为"px"
      viewportWidth: 750, // 视窗的宽度，对应设计稿的宽度
      viewportUnit: "vw", // 指定需要转换成的视窗单位，建议使用 vw，兼容性现在已经比较好了
      fontViewportUnit: "vw", // 字体使用的视口单位

      // viewportWidth: 1599.96, // 视窗的宽度，对应设计稿的宽度
      // viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用 vw
      // fontViewportUnit: 'vw', // 字体使用的视口单位

      unitPrecision: 8, // 指定`px`转换为视窗单位值的小数后 x位数
      //   viewportHeight: 1334, //视窗的高度，正常不需要配置
      propList: ["*"], // 能转化为 rem的属性列表
      selectorBlackList: [], //指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false, // 允许在媒体查询中转换
      replace: true, //是否直接更换属性值，而不添加备用属性
      // exclude: [], //忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
      landscape: false, //是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
      landscapeUnit: "rem", //横屏时使用的单位
      landscapeWidth: 1134 //横屏时使用的视口宽度
    }
  }
};

rem单位和vw单位的区别

rem事实上是作为一个过渡方案，它利用的也是vw的思想，并且随着前端的发展，vw的兼容性已经越来越好了，可以说具备了rem的所有优势。 但是我们假想一个这样的场景，我们希望网页在达到800px的时候页面布局不需要继续扩大了，这个时候如果我们采用的是rem布局，我们可以使用媒体查询设置max-width，而vw则始终是以视口为单位，自然不容易处理这样的场景。 当然，vw相比于rem，存在以下优势：

  1. 不需要计算font-size大小
  2. 不存在font-size继承的问题
  3. 不存在因为某些原因篡改了font-size导致页面尺寸混乱的问题
  4. vw更加的语义化
  5. 具备rem的所有优点

所以在开发中也更推荐大家使用vw单位进行适配。

我家等离子电视也能用的移动端适配方案

转载自:https://juejin.cn/post/7197623702410248251
评论
请登录