CSS——移动端适配方案

最新推荐文章于 2024-08-16 08:15:00 发布

ムラサキ

最新推荐文章于 2024-08-16 08:15:00 发布

阅读量1.2k

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/ZKH129/article/details/125287025

版权

一、viewpoint缩放方案

原理：在写CSS时完全按照设计稿来（如750px设计稿），页面开发好后在head标签内加上：

<meta name="viewport" content="width={设计稿宽度}, initial-scale={屏幕逻辑像素宽度/设计稿宽度}" >

代码：

<script>
    const width = 750
    const adapter = ()=>{
      let scale = screen.width/width
      let content = `width=${width},inital-scale=${scale}`
      let meta = document.querySelector('meta[name=viewpoint]')
      if(!meta){
        meta = document.createElement('meta')
        meta.setAttribute('name',viewpoint)
        document.head.appendChild(meta)
      }
        meta.setAttribute('content',content)

    }
    mobileAdapter()
    window.onorientationchange = mobileAdapter // 移动端屏幕旋转
</script>

优点：开发流程比较简单。
缺点：只能做到页面整体放大缩小，对于不想缩放的元素无法控制。比如边框会在大屏手机下显示得很粗，小屏手机上显示得很细。

二、rem方案

原理：1rem是html根元素font-size的1倍大，因此只要调整根元素的font-size，就能实现页面的响应式布局。对于不想缩放的元素，比如边框，则可以依然使用px为单位。比如：

设置 html 的 font-size 为 100*屏幕宽度/设计稿宽度
在写 CSS 时设置 div 的宽度是 3.75rem（计算时用设计稿标注值除以100），边框宽度为 1px

  <script>
    const WIDTH = 750  //如果是尺寸的设计稿在这里修改
    const setView = () => {
      //设置html标签的fontSize
      document.documentElement.style.fontSize = (100*screen.width/WIDTH) + 'px'
    }
    window.onresize = setView; // 如果窗口大小发生改变，就触发 setView 事件
    setView()
  </script>

适配原理稍复杂
需要使用 JS
设计稿标注的 px 换算到 css 的 rem 计算简单
方案灵活，既能实现整体缩放，又能实现局部不缩放

三、vw、vh

原理：vw表示屏幕1%的宽度，vh表示屏幕1%的高度。需要缩放的元素用vw、vh，不需要缩放的继续用px。

比如，设计师交付的设计稿宽度是 750px，设计稿上一个标题的 fontSize 标注尺寸是32px。(32/750)*100% = 4.27% ，即4.27vw。

假设设计稿尺寸是750px，页面有一个按钮，按钮文字标注大小28px，按钮高度标注为48px，宽度为120px，边框为1px不缩放。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .button {
      width: 16vw;        /*  100vw*120/750  */
      font-size: 3.73vw;  /*  100vw*28/750  */
      line-height: 6.4vw; /*  100vw*48/750  */
      border: 1px solid #000; /*不需要缩放的部分用px*/
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="button">按钮</div>
</body>
</html>

虽然不用写JS，但是换算vw比较麻烦。

可以使用CSS的calc来计算：

:root {
  --ratio: calc(100vw/750); //定义变量，1--ration对应设计稿的1px
}
.button {
  font-size: calc(100vw*28/750);  /* 可以直接用calc */
  line-height: calc(100vw*48/750);
  
  width: calc(120*var(--ratio));  /* 也可以用calc配合var使用，IE不支持var */     
  border: 1px solid #000; /*不需要缩放的部分用px*/
  text-align: center;
}

当然，也可以使用SCSS：

@function px2vw($px) {
  @return $px * 100vw / 750;
}
.button {
  width: px2vw(120);
  font-size: px2vw(28);
  line-height: px2vw(48);
  border: 1px solid #000;
  text-align: center;
}