2014-02-20 3 views
1

Возможно ли использовать запрос @media CSS для ориентации определенных стилей с использованием пареметра, взятого из базы данных с использованием 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_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 будет лучше.

+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, чтобы ваша презентация выглядела вместо PHP.

+0

Да, я не думал о том, чтобы использовать класс тела, но это определенно выглядит более чистым, чем несколько документов CCS.Я предполагаю, что эта простота работает лучше для простых изменений компоновки, например, в сообщении –

+0

Да, всегда существует битва между размером файла и количеством файлов ... и почти никогда не существует идеального решения. – Shomz

0

CSS не имеет логической обработки, он не будет знать, какой макет вы хотите использовать. Браузер просто будет интерпретировать обе компоновки вместе и отобразить в зависимости от того, какие правила имеют приоритет.

Ваш фрагмент кода в нижней части вопроса (загрузка в другой таблице стилей в зависимости от того, какой макет вы хотите визуализировать) будет способом сделать это. Вы можете обрабатывать его на стороне сервера с помощью PHP (решено, как страница отображается) или на стороне клиента с Javascript (пользователь может переключаться между макетами без обновления страницы).

Смежные вопросы