移动端PC端适配方案: vw配合rem适配，媒体查询(响应式)

憨憨404

已于 2024-06-20 16:21:36 修改

阅读量1.4k

点赞数 2

分类专栏： HTML + CSS + CSS3（页面布局）文章标签：媒体 css html

于 2022-11-22 16:33:36 首次发布

本文链接：https://blog.csdn.net/qq_60839348/article/details/127970278

版权

HTML + CSS + CSS3（页面布局）专栏收录该内容

23 篇文章 0 订阅

订阅专栏

移动端

<!-- 
    新增的块级元素：
        1.header,可以用来写头部区域
        2.footer，可以用来写尾部区域
        3.nav，可以用来写导航区域
        4.section，类似于div的
        5.main,可以划分页面的主要内容区域
        6.article,文章区域
        7.aside，侧边栏
        8.figure+figcaption
        9.hgroup标题组
 -->

常见的设备：

iPhone5 真实宽度：320 设计稿宽度：640 两倍关系

iphone678 375 750 两倍关系

iphone678plus 414 1242 三倍关系

iphoneX 375 1125 三倍关系

适配：

1.改视口为理想视口

    <!-- 
        viewport：view视觉 port：端口  视口
        width=device-width:视口的宽度等于设备的宽度
        initial-scale=1.0：初始缩放比例为1
        minimum-scale=1.0：最小缩放比例为1
        maximum-scale=1.0：最大缩放比例
        user-scalable=no：禁止用户缩放
     -->

    <!-- 改视口为理想视口 -->
<meta name="viewport" content="width=device-width, 
initial-scale=1, maximum-scale=1, user-scalable=no">

2.确定dpr:

设计稿大小，找到对应设备，设计稿 / 设备大小 = dpr

测的像素值/dpr=像素值，正常来说，设计稿一般是正常设备的2,3倍, 所以除以2或者3

3.考虑适配问题

更改html字号（字号可以自己随便去设置）

借助插件 px to rem : 设置基准字号：100 px 。适配完后会自动转换

eg： 750 / (dpr: 750/350) / 字号100 = 3.75

视图分为 100vw / 3.75 = 26.67vw

字号回归正常: font-size: 16px;

4.插件转换 px rem : px to rem & rpx & vw

移动端或者大屏适配 rem 会用的到。具体设置里改基数

选中按 Alt + Z 可以px和rem转换

vw配合rem做移动端

( PC端其实也一个道理, 比如一倍关系, 1280, 或者大于 980 )

1920*1080

eg: 3 倍的设计稿 (vue index.html 页面)

    /* 视图宽度为  iphone678plus    1242    三倍关系 */
    100vw  /  [ 1242      /  drp: (   1242   /  414     )  /    100 ]      =   24.15vw
    html {
      font-size: 24.15vw;
    }

    /* 高度自适应 */
    html,
    body {
      height: 100%;
    }

    /* 让页面字号回归正常 */
    body #app {
      font-size: 16px;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

eg: 2 倍的设计稿

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 改视口为理想视口 -->
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,
          minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <title>App</title>
    <!-- 标签初始化 reset.css -->
    <link rel="stylesheet" href="./reset.css" />

    <style>
      /* 
        设计稿大小为750px,设备则为iPhone678 375px
        自定插件100基数: 

        设计稿750 / (设计稿750 / iphone678) /  基准字号100px    =  3.75
        750      /  (   750   /  375     ) /    100            =  3.75

        视图宽度：100vw
        更改字号: 100vw / 3.75=26.67vw
        字号回归正常:font-size: 16px;  
        就实现了 1rem = 基准字号 100px
      */

      /* 视图宽度 */
      html {
        font-size: 26.67vw;
      }

      /* 高度自适应 */
      html,
      body {
        height: 100%;
      }
      /* 让页面字号回归正常 */
      body {
        font-size: 16px;
        display: flex;
        flex-direction: column;
        height: 100%;
      }
      /*  */
      header {
        height: 0.44rem;
        background-color: aqua;
      }
      /*  */
      nav {
        height: 0.7rem;
        background-color: aquamarine;
      }
      /* 去除滚动条 */
      ul::-webkit-scrollbar {
        display: none;
      }
      nav ul {
        height: 0.35rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 0.14rem;
        /* 滚动导航 */

        flex: 1;
        overflow: auto;
      }

      /* 内容区自适应其他不动 */
      main {
        height: 100%;
        flex: 1;
        overflow: auto;
        background-color: pink;
      }
      /*  */
      footer {
        height: 0.88rem;
        background-color: blue;
      }
    </style>

  </head>
  <body>
    <!-- vw vh -->
    <header>头部</header>
    <nav>
      <ul>
        <li>直播啊</li>
        <li>直播啊</li>
        <li>直播啊</li>
        <li>直播啊</li>
        <li>直播啊</li>
        <li>直播啊</li>
        <li>直播啊</li>
        <li>直播啊</li>
        <li>直播啊</li>
        <li>直播啊</li>
      </ul>
      <!-- icon字体 -->
      <span class="iconfont icon-gengduo"></span>
    </nav>
    <main>
      <figure>
        <img src="" alt="" />
        <figcaption></figcaption>
      </figure>
    </main>
    <footer>尾部</footer>
  </body>
</html>

标签初始化 reset.css

  /* 
   标签初始化 reset.css
  */
  /* 清除所有标签默认的内外间距 */
  * {
    padding: 0;
    margin: 0;
    /* 全变成怪异盒子 */
    box-sizing: border-box;
  }
  /* 版心 */
  .center {
    /*
     width: 1220px;
     height: 100%;
     margin:0 auto;
     background-color: pink; */
  }
  /* 万能清除法 */
  .clearfix::after {
    content: "";
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    display: block;
    clear: both;
  }

  /* 清除列表的默认样式 */
  ul,
  ol {
    list-style: none;
  }

  /* 清除下划线 */
  a,
  u {
    text-decoration: none;
  }

  /* 不加粗 */
  b,
  strong {
    font-weight: 400;
  }

  /* 不倾斜 */
  i,
  em {
    font-style: normal;
  }

  /* 不加粗 统⼀16px */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 16px;
    font-weight: 400;
  }

  /* 清除输⼊框的轮廓线 */
  input {
    outline: none;
  }

媒体查询:

( 可以做 PC端和手机端的不同样式页面 ), 搭配rem, 可能事半功倍

调整设备宽度可以看到

@media 媒体查询布局响应式布局简单案例-CSDN博客文章浏览阅读76次。@media 媒体查询布局响应式布局简单案例https://blog.csdn.net/qq_60839348/article/details/129419976

    <style>
      /* 不在媒体查询里边的页面:  */
      .home {
        overflow-x: hidden;
        overflow-y: hidden;
        /* 查看变化 */
        background-color: skyblue;
      }
      /* @media中的样式: 当设备在 980 - 375 之间会显示 */
      @media screen and (max-width: 980px) and (min-width: 374px) {
        /* 解决滚动条 */
        .home {
          overflow-x: hidden;
          overflow-y: hidden;
          /* 查看变化 */
          background-color: pink;
        }
      }
    </style>

<style>
  @media all and (max-width: 320px) {
    html {
      font-size: 12px;
    }
  }

  @media all and (min-width: 321px) and (max-width: 376px) {
    html {
      font-size: 14px;
    }
  }

  @media all and (min-width: 377px) {
    html {
      font-size: 16px;
    }
  }
</style>