如何使用 PHP 应用 css 属性？ [关闭]答案

【问题标题】：How do I use PHP to apply css properties? [closed]如何使用 PHP 应用 css 属性？ [关闭]
【发布时间】：2014-03-02 17:06:22
【问题描述】：

我想使用 PHP 将 CSS 文档的属性链接到自身，就像下面的 HTML 一样：

<link rel="stylesheet" href="mobile.css" type="text/css">

具体来说，我不想导入 CSS 文件，以便它简单地显示在我的 HTML 中的两个 CSS <style> 标记之间。我希望 PHP 应用 CSS 文档中的属性。

我还希望 PHP 能够在这个 if 语句中工作：

<?php
if ($mobile == True)
{
//Your solution here
}
?>

谢谢！

【问题讨论】：

您能解释一下为什么要这样做吗？您想将 CSS 属性应用于什么？
您想要的基本上非常简单，只需在链接标签中包含您的 php 文件并发送正确的标头即可。但是只应用一个“移动”类并相应地修改 CSS 会更简单。恕我直言，您应该在 2014 年加入我们并阅读有关 Responsive Web Design 的信息。
@kapa 我想将 CSS 属性应用到 PHP 文档中的 HTML。我想这样做是因为我有一个非常轻便、快速和智能的 PHP 查询，它可以感知浏览器是否是移动的。这个 PHP 查询不会像其他东西那样快速或准确。
@LarryK 我知道您的 PHP 查询或任何真正令人震惊的东西......但是......为什么当这个惊人的 PHP 查询喊出“移动！”？为什么需要内联样式？
@nietonfir 我已经为我的大多数 CSS 属性使用了百分比单位，但是我希望我的移动网站看起来有很大不同，因此需要一些非常不同的 CSS 属性。

标签： php html css

【解决方案1】：

这是您要求的，但这不是最佳做法，我不推荐它。我会向您推荐@nietonfir 的建议（尽管有点苛刻，但他/她是对的）。作为响应式设计（媒体查询）的一部分，在 CSS 中做移动端的事情要好得多，也更容易。

<?php
if ($mobile == True){
    echo '<link rel="stylesheet" href="mobile.css" type="text/css">';
}
?>

【讨论】：

哇，我是个白痴！我怎么没想到呢‽ 谢谢！如果可以的话，我会投票赞成你的回复！
嗯，每个人在某些时候都是白痴，这就是为什么其他人都试图提供帮助的原因。事实上，即使是做了 10 年以上的程序员也在学习。我试图尽快通过事情白痴，这有帮助。 Stack Overflow 的标语应该是“每天帮助你不再像个白痴”。
虽然它更容易，但我们不要忘记该建议的另一面：增加下载时间。如果我从 iPhone 访问，它将下载所有这些不必要的仅限桌面的 css，即使我永远不会使用它。另一方面，我们正在谈论（通常是）节省下载时间最少的大量工作。我只是说权衡您的选择并为正确的工作选择正确的工具。
绝对是@DanielRippstein 我同意，但我也认为查看其他方法很有价值，因此您可以了解不该做什么以及为什么不做。

【解决方案2】：

您不想将特定的 css 文件放入 html 中吗？这不是正确的方法，因为 w3c 已经有了这个problem fixed

但是你要做的就是把css直接放到html里面……就像用echo打印代码

<?php
if ($mobile == True)
{
    echo '<style type="text/css">
              /*
               * your mobile css
               */

               body{
                   color: #f00;
                   background: #000;
               }
          </style>';
}
?>

Wich 是我真的不推荐的东西

【讨论】：

【解决方案3】：

您的方法不正确。假设您尝试为移动设备应用某些样式，您可以在 CSS 中使用媒体查询。见：http://www.w3schools.com/css/css_mediatypes.asp

或者，如果您只是尝试根据屏幕宽度设置样式：

@media (max-width: 768px) {
  /* your styles here.... */
}

【讨论】：

我现在用于移动浏览器检测的是： <link rel="stylesheet" media="screen and (max-device-width: 900px)" href="mobile.css" />  <link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="mobile.css" /> 但通常这在 android 设备上不起作用。在这种情况下你有什么建议？
它有时可能不起作用，因为您正在指定屏幕密度。有关更多信息，请参阅this documentation。查看 bootstrap 或基础，看看他们如何构建响应式框架。他们的风格，包括媒体查询，不关心它是什么设备，只关心屏幕大小。

【解决方案4】：

我猜你想要的是为移动视图加载不同的 CSS。由于，我更喜欢的方法是在不同视图的修改中使用一个 css 文件。因此，在您的 style.css 中，您可以执行以下操作：

.example-box { width: 1200px; background-color: #ccc; }

/* Tablet Landscape */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    .example-box { width: 1000px; background-color: #ccc; }
}

/* Smaller than 960px */
@media only screen and (max-width: 959px) {
    .example-box { width: 900px; background-color: #ccc; }
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .example-box { width: 900px; background-color: #ccc; }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
    .example-box { width: 700px; background-color: #ccc; }
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .example-box { width: 700px; background-color: #ccc; }
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
    .example-box { width: 400px; background-color: #ccc; }
}

【讨论】：