根據URL在兩個不同的CSS定義之間切換

我有這個控制桌面版本網站上的某些模式的CSS。根據URL在兩個不同的CSS定義之間切換

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

如果URL包含「/移動/」我想有切換CSS代碼

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

究竟會是怎樣做到這一點的最好方法是什麼？我想像我會使用jQuery或JavaScript這裏

來源

2013-11-02 Hoser

使用兩種不同類型的兩種款式和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'); 
}

如果你想要你可以刪除舊的類，然後添加上述方法中的新類。

來源

2013-11-02 05:06:59 Gautam3164

+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的設置基於頁面加載的URL <body>類：

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

來源

2013-11-02 05:10:39

如何有2個不同的CSS文件？一個是桌面版本，另一個是移動版本？用這樣的東西改變頁面中的css文件

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

來源

2013-11-02 05:21:02 eggward

你可以做到這一點，而無需使用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-06 05:57:25

根據URL在兩個不同的CSS定義之間切換

回答

相關問題