Question

是否可以使用CSS的@media查询使用从使用mysql的数据库中获取的参数来定位特定样式。我已经看到并使用它来根据屏幕大小定位不同的样式，但我可以为数据库中的某些内容执行此操作。

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）要么堆叠在一起，要么并排堆叠。但我可以使用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文档中使用更简洁的方法来定位各个样式会更好。

Answer 1

您可以在身体上使用课程，或者只是将工作表分开。

在第一种情况下，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。

Answer 2

CSS没有逻辑处理，它不知道你想要使用哪种布局。浏览器将简单地将两个布局一起解释，并渲染优先使用的规则。

问题底部的代码片段（根据您要呈现的布局加载不同的样式表）将成为执行此操作的方法。您既可以使用PHP处理服务器端（在呈现页面时使用），也可以使用Javascript在客户端处理（用户可以在不刷新页面的情况下在布局之间切换）。

我可以使用特定参数定位CSS样式吗？

2 个答案: