PC端项目兼容手机端

背景

开发中要求实现一个页面适配pc适配mobile,没有真实操作过记录一下。

方案

GPT推荐

  • 响应式布局
    • 使用 CSS 媒体查询 (采用)
    • 使用 Tailwind CSS
  • 视口单位 + REM 适配 + (采用
  • 组件化方案(PC 和 Mobile 组件分开)
  • 动态路由区分 PC 和 Mobile

推荐建议:

  • 如果 PC 和移动端 UI 结构相似推荐方案 1(响应式布局)

  • 如果 PC 和移动端适配需要更精准的缩放方案 2(REM + px 转换)

  • 如果 PC 和 Mobile 差异较大方案 3(不同组件)

  • 如果 PC 和 Mobile 完全不同方案 4(动态路由跳转)

实现

  1. 根据视口计算REM的值, 并监听视口变化
html 复制代码
<!doctype html>
<html lang="en">
    <head>
        <!-- 这个必须要有 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    </head>

    <body>
        <div id="app"></div>
    </body>
    <script>
        // 设置根元素的字体大小
        function setRootFontSize() {
            const width = window.innerWidth;
            const baseWidth = width > 768 ? 1920 : 375; // 根据ui设计图来设定,pc: 1920; mobile: 375
            const fontSize = (width / baseWidth) * 16; // 根据屏幕宽度设置字体大小,16px 是基础字体大小
            document.documentElement.style.fontSize = `${fontSize}px`; 
        }

        // 初始化
        setRootFontSize();

        // 在窗口大小变化时重新设置字体大小
        window.addEventListener('resize', setRootFontSize);
    </script>
</html>

2.pc以及mobile的设计图结构分析

一般使用 Flex 或者 Grid。我项目中使用的是Flex,但是觉得Grid更好一些。

遇到问题以及解决

  • 第三方组件样式问题

    • 问题 使用antd的组件时,在切换到移动端时,样式展示不一致问题
    • 解决 使用 css in js自定义组件样式,将一些px单位的值转为rem
    js 复制代码
    import styled from 'styled-components';
    import { Button } from 'antd'
    
    const CustomBtn = styled(Button)`
      // xxxxx
    `
相关推荐
ᥬ 小月亮10 分钟前
webpack基础
前端·webpack
YongGit28 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea2 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia2 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye2 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤2 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js