0

我有这个 CSS，它控制网站桌面版本上的一些模式。

#modal, #purchModal, #travModal, #notesModal, #explainModal 
{ position: fixed; z-index: 101; top: 10%; left: 25%; 
   width: 50%; background:#CEECF5; border-radius:15px; 
}

如果 url 包含“/mobile/”，我想将 CSS 代码切换到

 z-index: 101; top: 5%; left: 5%; width: 95%; 
 background:#CEECF5; border-radius:15px;

究竟什么是最好的方法呢？我想我会在这里使用 jQuery 或 JavaScript

4

4 回答 4

4

Toggle为样式和它们使用两个不同的类

.Class1 { 
    position: fixed; z-index: 101; top: 10%; left: 25%; 
    width: 50%; background:#CEECF5; border-radius:15px; 
}

.Class2 {
    z-index: 101; top: 5%; left: 5%; width: 95%; 
    background:#CEECF5; border-radius:15px; 
}

并像这样切换它们

$('Element you want to change css').toggleClass('Class1' , 'Class2');

或者你可以直接使用like

if(document.url.indexOf('mobile')!=-1)
{
    $('Element you want to change css').addClass('Class1');
}
else
{
    $('Element you want to change css').addClass('Class2');
}

如果您愿意，可以删除旧类，然后在上述方法中添加新类。

于 2013-11-02T05:06:59.613 回答
1

首先，定义两个 CSS 变体：

/* Desktop */
#modal, #purchModal, #travModal, #notesModal, #explainModal {
  position: fixed; z-index: 101; top: 10%; left: 25%; 
  width: 50%; background:#CEECF5; border-radius:15px; 
}

/* Mobile */
body.mobile #modal, body.mobile #purchModal, body.mobile #travModal,
body.mobile #notesModal, body.mobile #explainModal {
  z-index: 101; top: 5%; left: 5%; width: 95%; 
  background:#CEECF5; border-radius:15px;
}

然后，让 jQuery<body>在页面加载时根据 URL 设置类：

$(function() {
  var isMobile = /\/mobile\/.test(window.location.url);
  $('body').toggleClass('mobile', isMobile);
});
于 2013-11-02T05:10:39.393 回答
1

你可以在不使用 jQuery 或 JavaScript 的情况下做到这一点。只需为不同的设备编写 css

//A comman css for class #modal
 #modal {
   position: fixed;
   top: 10%;
   left: 50%;
   z-index: 1050;
   width: 560px;
   margin-left: -280px;
   background-color: #ffffff;
 }

//if screen width is less then 767px
@media (max-width: 767px) {
 #modal {
    position: fixed;
    top: 20px;
    right: 20px;
    left: 20px;
    width: auto;
    margin: 0;
  }
}

//if screen width is less then 480px
@media (max-width: 480px) {
 #modal {
    top: 10px;
    right: 10px;
    left: 10px;
  }
}

因此，您可以在不包括这个不需要的 JS jQuery 的情况下改善加载时间。

于 2013-11-06T05:57:25.093 回答
0

有2个不同的css文件怎么样？一个用于桌面版，另一个用于移动版？用这样的东西改变页面中的css文件

$('head').append('<link rel="stylesheet" href="desktop.css" type="text/css" />');
于 2013-11-02T05:21:02.690 回答