2017-07-19 78 views
1

我一直在嘗試使用PHP將我的CSS文件內容插入頁面的style標記中。當PHP插入時CSS不工作

<style> 
    <?php 
     $css = file_get_contents('css/roboto-robotocondensed.css'); 
     $css .= file_get_contents('css/reset.css'); 
     $css .= file_get_contents('css/mainstyle.css'); 
     $css .= file_get_contents('css/industriaalimentosebebidas.css'); 
     echo $css; 
    ?> 
</style> 

而在最後一個文件,「industriaalimentosebebidas.css」,我有以下代碼:

header { 
    height: 500px; 
    background: url(../img/cases/casos-de-sucesso-alimentos-e-bebidas-cover.jpg) no-repeat center bottom/cover; 
} 

header p { 
    width: 75%; 
    font-size: 1.536rem; 
} 
.imgGradient { 
    height: 100%; 
} 

@media only screen and (min-width: 1600px) { 
    header { 
     height: 700px; 
    } 
} 

出於某種原因,媒體查詢上面的標題樣式代碼是由瀏覽器忽略。 但是,當我得到CSS文件使用

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

一切工作正常。

在檢查器中,標題高度似乎沒有被覆蓋......並且背景圖像未被加載。

即使我刪除媒體查詢部分,標題部分不起作用。

在HTML head我使用

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> 

有誰有什麼可能什麼的線索?

+6

你可以添加在客戶端所產生的網頁源代碼?我的意思是查看來自瀏覽器的源代碼,將其複製並粘貼到此處 - 可能會更容易看到問題 – Danyv

+0

在哪裏?我猜其中一個文件沒有關閉{ – wodka

+0

你可以在這裏看到 http://www.instrumentos-lince.com.br/industria-alimenticia –

回答

3

在你的CSS認準行:

#infos .imgContainer{max-height:25vw}1rem} 

這是它被打破的原因。

原:

基本文件之間加空格:(沒有分號,記得錯)

<style> 
<?php 
    echo implode("\n", [ 
     file_get_contents('css/roboto-robotocondensed.css'), 
     file_get_contents('css/reset.css'), 
     file_get_contents('css/mainstyle.css'), 
     file_get_contents('css/industriaalimentosebebidas.css') 
    ]); 
?> 
</style> 
+1

不知道這是否適用於* this *問題,但聲音像一個好主意:) – Martin

+0

由於媒體查詢關閉括號,因此添加分號實際上會破壞CSS。 但刪除1rem解決了這個問題。 由於某些原因,當我縮小CSS時,它已經壞了。 謝謝! –