Question

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

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

如果网址包含'/ mobile /'，我想将CSS代码切换到

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

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

Answer 1

对两种样式使用两个不同的类，并为它们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');

或者您可以直接使用

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

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

Answer 2

首先，定义两个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根据页面加载时的URL设置<body>类：

$(function() {
  var isMobile = /\/mobile\/.test(window.location.url);
  $('body').toggleClass('mobile', isMobile);
});

Answer 3

您可以在不使用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的情况下改善加载时间。

Answer 4

拥有2个不同的css文件怎么样？一个用于桌面版，另一个用于移动版使用类似的内容更改页面中的css文件

$('head').append('<link rel="stylesheet" href="desktop.css" type="text/css" />');

基于URL在两个不同的CSS定义之间切换

4 个答案: