2014-02-20 62 views
1

是否可以使用CSS的@media查詢來使用從數據庫中使用mysql獲取的參數來定位特定樣式。我已經看到並使用它來根據屏幕大小定位不同的樣式,但是我可以爲數據庫中的某些東西做到這一點。我可以使用特定參數定位CSS樣式嗎?

CSS - 兩個不同的佈局

.div{ 
    width:100%; 
    float:none; 
} 
.div_two{ 
    width:100%; 
    float:none; 
} 
.div{ 
    width:50%; 
    float:left; 
} 
.div_two{ 
    width:50%; 
    float:left; 
} 

正如可以看到兩個div(DIV和div_two)或者堆疊在彼此的頂部上或並排。但我的winder是可以從數據庫使用php的佈局,然後決定應用div的方式。

$query = mysqli_query($con,"SELECT * FROM pages WHERE page = '$page'"); 
$results = mysqli_fetch_assoc($query); 
$layout = $results['layout']; 
$div = $results['div']; 
$div_two = $results['div_two']; 
echo '<div class="div">'.$div.'</div><div class="div_two">'.$div_two.'</div>'; 

東西會自動挑選出的頁面將簡化了很多東西(如果這是可能的PHP)的佈局或者是解決這個問題的唯一辦法這個腳本添加到文檔的頭部和創建每個佈局單獨的樣式表?

if($layout == 1){ 
    echo 'style sheet 1'; 
}else if($layout == 2){ 
    echo 'style sheet 2'; 
}else{ 
    echo 'default style sheet'; 
} 

我沒有看到這種方法的問題,但相同的CSS文件內的個別款式會更好,更清潔的方式。

+0

是的,可以做同樣的事情,或者以我的觀點來看,使用兩種不同的樣式表並根據需要調用它。 –

回答

3

你可以在身體上使用一個班級,或者只是分開牀單。


在第一種情況下,你的CSS將是這樣的:

.type1 .div{ 
    width:100%; 
    float:none; 
} 
.type1 .div_two{ 
    width:100%; 
    float:none; 
} 
.type2 .div{ 
    width:50%; 
    float:left; 
} 
.type2 .div_two{ 
    width:50%; 
    float:left; 
} 

你也可以使用PHP來指定體類:<body class="<?php echo $selectedClass; ?>">


而在其他情況下, ,你會使用PHP來選擇加載哪個CSS文件:

if($layout == 1){ 
    $css = 'css1'; 
}else if($layout == 2){ 
    $css = 'css2'; 
}else{ 
    $css = 'default'; 
} 

然後:<link rel="stylesheet" type="text/css" href="<?php echo $css; ?>.css">


您選擇的方法取決於片之間的差異量 - 如果僅僅是少數,方法之一是好的,但如果你想顯示在每一個完全不同的表現,使用方法兩個並根據需要製作儘可能多的CSS文件(您可能會考慮使用一個通用CSS,另一個將是特定的CSS文件之一)。

試着讓CSS驅動你的演示文稿而不是PHP。

+0

是啊,沒有想到使用一個body類,但是看起來更乾淨,然後擁有多個CCS文檔。我猜這簡單的工作原理是在崗簡單佈局的改變更好 –

+0

是的,總是有文件大小與文件數量之間的戰鬥......而且也幾乎從來沒有一個完美的解決方案。 – Shomz

0

CSS沒有邏輯處理,它不知道你想要使用哪種佈局。瀏覽器將簡單地將兩種佈局解釋在一起,並渲染任何優先的規則。

您在問題底部的代碼片段(根據您想呈現的佈局加載不同的樣式表)將成爲實現此目的的方式。您可以使用PHP處理服務器端(在頁面呈現時決定)或使用Javascript處理客戶端(用戶可以在不刷新頁面的情況下在佈局之間切換)。

相關問題