2014-02-20 63 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处理客户端(用户可以在不刷新页面的情况下在布局之间切换)。

相关问题