快速将pc和移动端网站合并成响应式网站

小鱼儿 2022-05-22 01:15 130阅读 0赞

**一、使用媒体查询加载不同css文件**

<link rel="stylesheet" type="text/css" href="m/css/style.css" media="screen and (max-width:800px)">

<link rel="stylesheet" type="text/css" href="/style/css/home\_header.css" media="screen and (min-width: 800px)">  
<link rel="stylesheet" type="text/css" href="/style/css/style.css" media="screen and (min-width: 800px)">

<link rel="stylesheet" type="text/css" href="/style/css/lightbox.css" media="screen and (min-width: 800px)">

**二、控制显示内容**

<style type="text/css">

/\*移动端pc端媒体查询\*/  
  
  
.pc\_show\{ /\*div里是pc端布局\*/  
display: none;  
\}  
.phone\_show\{/\*div里是移动端布局\*/  
display: none;  
\}  
  
  
@media (min-width: 300px) \{  
.phone\_show \{  
        display: block;  
    \}  
    .pc\_show\{  
    display: none;  
    \}  
         
    \}  
@media (min-width: 700px) \{  
    .pc\_show \{  
         display: block;  
    \}  
    .phone\_show\{  
    display: none;  
    \}  
\}

</style>

**三、布局**

<div class="pc\_show">此处放pc布局</div>

<div class="phone\_show">此处放移动端布局</div>

发表评论取消回复

表情：

评论列表（有 0 条评论，130人围观）

还没有评论，来说两句吧...

相关阅读

相关如何加速响应式网站

日期：2013-9-6 来源：[GBin1.com][] [![如何加速响应式网站][title.jpg]][title.jpg 1] 响应式网站设计在最近的十年中早已是

逃离我推掉我的手/ 2022年10月06日 11:56/ 0 赞/ 173 阅读

相关 Bootstrap 前端框架制作响应式网站

放假突然兴起，想学点前端框架，制作一个页面玩玩(PS:一直做后端，怕忘了前端的知识，所以补一补)。说做就做，花了一天的时间，谷歌开发者模式，仿制别人公司的页面(希望不会被查!

﹏ヽ暗。殇╰゛Y/ 2022年06月16日 03:16/ 0 赞/ 222 阅读

相关快速将pc和移动端网站合并成响应式网站

一、使用媒体查询加载不同css文件 <link rel="stylesheet" type="text/css" href="m/css/style.css" media="

小鱼儿/ 2022年05月22日 01:15/ 0 赞/ 131 阅读

相关响应式网站的开发

什么是响应式网站？响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。页面的设计与

ゝ一纸荒年。/ 2022年05月10日 01:04/ 0 赞/ 269 阅读

相关响应式网站项目开发到打包

GITHUB项目传送门：[https://github.com/Max-hearted/responsiveWeb][https_github.com_Max-hearted_

傷城~/ 2022年05月09日 08:28/ 0 赞/ 225 阅读

相关浅谈pc和移动端的响应式

身为一个前端攻城狮，是不是经常遇到各种各样的响应式问题？下面我们来说一下： 1.响应式跟自适应有什么区别? [关于响应式布局，你必须要知道的][Link 1] 有些人可能

青旅半醒/ 2022年03月28日 04:38/ 0 赞/ 300 阅读

相关 javaweb区分PC端和移动端

原文：https://blog.csdn.net/xiaoxian8023/article/details/37527133 欢迎访问我的个人博客 [http

分手后的思念是犯贱/ 2022年03月21日 14:46/ 0 赞/ 501 阅读

相关响应式网站设计（7）-打印样式

打印样式打印样式，顾名思义是网页打印专用的样式。对应需要打印的网页，可以专门添加打印样式。打印样式的主要作用的是去除背景颜色，去除阴影，换行处理等等。具体代码如下：

以你之姓@/ 2021年09月16日 04:32/ 0 赞/ 370 阅读

相关响应式网站设计（6）-媒体查询

媒体查询调试工具在PC端样式设置完毕之后，我们需要适配移动端。首先，我们选择的设备类型不是某一种设备，而是responsive。另外，我们可以打开标签和

我不是女神ヾ/ 2021年09月16日 04:32/ 0 赞/ 327 阅读

相关响应式网站设计（1）-理论

响应式网站设计响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。响应式

系统管理员/ 2021年09月16日 04:14/ 0 赞/ 433 阅读