Merhaba PT.

Başlıkta tam olarak istediğim şeyi belirtemediğimi düşünüyorum. :)

Burada açmış olduğum konuda bir çözüm bulamadığımız durumla ilgili aklıma şöyle birşey geldi. Çalışma bittikten sonra CSS çıktısını kopyalayıp, PHP ile birleştirme yapabilir miyiz?

Örneğin;

.box {
  width: 50%;
  margin: 0 auto;
  background-color: red;
  text-align: center;
  padding: 15px;
}

@media (max-width: 1200px) {
  .box {
    background-color: blue;
  }
}

@media (max-width: 992px) {
  .box {
    background-color: orange;
  }
}

@media (max-width: 768px) {
  .box {
    background-color: purple;
  }
}

.box h1 {
  font-size: 48px;
}

@media (max-width: 1200px) {
  .box h1 {
    font-size: 38px;
  }
}

@media (max-width: 992px) {
  .box h1 {
    font-size: 24px;
    font-weight: normal;
  }
}

@media (max-width: 768px) {
  .box h1 {
    font-size: 18px;
    font-weight: bold;
  }
}

.box p {
  font-size: 14px;
}

@media (max-width: 1200px) {
  .box p {
    font-size: 10px;
  }
}

@media (max-width: 992px) {
  .box p {
    font-size: 8px;
  }
}

.box p span {
  font-size: 12px;
}

@media (max-width: 1200px) {
  .box p span {
    font-size: 10px;
    font-weight: bold;
  }
}

Yukarıdaki CSS kodunu PHP ile;

.box {
  width: 50%;
  margin: 0 auto;
  background-color: red;
  text-align: center;
  padding: 15px;
}

.box h1 {
  font-size: 48px;
}

.box p {
  font-size: 14px;
}

.box p span {
  font-size: 12px;
}

@media (max-width: 1200px) {
  .box {
    background-color: blue;
  }
  .box h1 {
    font-size: 38px;
  }
  .box p {
    font-size: 10px;
  }
  .box p span {
    font-size: 10px;
    font-weight: bold;
  }
}

@media (max-width: 992px) {
  .box {
    background-color: orange;
  }
  .box h1 {
    font-size: 24px;
    font-weight: normal;
  }
  .box p {
    font-size: 8px;
  }
}

@media (max-width: 768px) {
  .box {
    background-color: purple;
  }
  .box h1 {
    font-size: 18px;
    font-weight: bold;
  }
}

Bu hale getirebilir miyiz?

Yapılması gereken işlem @media (max-width: 1200px) {} @media (max-width: 992px) {} @media (max-width: 768px) {} kelimelerini aratıp süslü parantez içindeki verileri birleştirmek.

Umarım anlatmak istediğimi anlatabilmişimdir. :)