Web前端开发 --》如何实现页面同时在移动端和pc端的兼容问题

最新推荐文章于 2025-06-17 15:21:10 发布

weixin_30876945

最新推荐文章于 2025-06-17 15:21:10 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 javascript 前端框架 ViewUI

原文链接：http://www.cnblogs.com/wangqi2019/p/11088711.html

本文介绍了一种在HTML文件中使用媒体查询实现响应式设计的方法，通过条件加载不同CSS文件来适应不同屏幕尺寸，确保了桌面和移动设备上的一致用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很简单，只需要在html文件中对你引入的css进行一个类似于媒体查询的操作

<!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样式表

转载于:https://www.cnblogs.com/wangqi2019/p/11088711.html