基于PHP变量的CSS媒体查询

问题描述：

I have a multi-lingual website where all the text for the site is being loaded in based on a PHP session variable for each language. My problem here is that when the text is loaded in German, the menu bar on the top of my page becomes too long for it's container and some menu items drop below. This would be okay but the menu items that get dropped down are blocking sub menus from being selected.

Is there a way to use css media queries to reduce font size of my menu when a certain variable is selected?

我有一个多语言网站，根据PHP会话变量加载网站的所有文本对于每种语言。我的问题是，当文本以德语加载时，我页面顶部的菜单栏对于它的容器来说变得太长而一些菜单项落在下面。这样就可以了，但是下拉的菜单项阻止子菜单被选中。 p>

当选择某个变量时，有没有办法使用css媒体查询来减少菜单的字体大小？ p> div>

答

There's no such media query but what you can do:

check if language in session is German
If no, do nothing more than you do at the moment
If yes, load one extra CSS file or extra rule where you have defined font-size for example this way:

nav ul li {
  font-size: 10px;
  font-size: 0.8rem;
}

This will change nothing for other language and for German language you can define custom CSS (font-size or of course anything else)

答

The best method is to add a CSS class to the body based on the language e.g <body class="language-german"> and then write CSS rules based on that

body.lang-german nav {font-size: 12px;}

答

Make your CSS file a PHP file. Yes you can do that, it's not magic.

suppose you have a CSS file called style.css: rename it style.css.php (.css is optional)

<?php
$lang = $_SESSION['page_lang']; //or however you prefer

if($lang == 'de'){
  echo "german style rules";
} else {
  echo "other style rules";
}

of course this is simplified but should make you going.

基于PHP变量的CSS媒体查询

相关推荐