Web前端开发 --》 如何实现页面同时在移动端和pc端的兼容问题
很简单，只需要在html文件中对你引入的css进行一个类似于媒体查询的操作
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="keywords" content="" /> <title>智能家居</title> <link rel="stylesheet" href="./css/common.css"> <link rel='stylesheet' href='./css/home.css' media='screen and (min-width: 480px)'> <link rel='stylesheet' href='./css/homeMobile.css' media='screen and (max-width: 479px)'></head><body> </body></html> |
注释为红色的代码含义也就是说 ： 当你浏览器宽度大于480px时，浏览器就会解析./css/home.css这个css文件；
当你历览器宽度小于479px时，浏览器会解析./css/homeMobile.css这个css文件。
而我们浏览器宽度最小宽度一般情况下都不会低于480px；而移动端浏览器宽度一般都为375左右，所以我们判断当小于480px时加载移动端的css样式表
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话