Wie erstellt man ein responsives Layout nur in Inline-CSS?

Question

Ich erstelle ein Layout für einen Blogpost, also muss alles in INLINE CSS sein. Das Problem ist ... es muss reagieren!

Also, in großen ecrans muss es zwei Blöcke in jeder Zeile mit der gleichen Breite haben. In kleinen ecrans muss es nur einen haben. Ich möchte wirklich nicht Bootstrap verwenden, weil es nicht auf IE8 funktioniert. Und ich denke, Medienabfragen funktionieren nicht inline, oder bin ich? Wenn ich bin, kannst du mir bitte erklären, wie man mit ihnen inline arbeitet?

Können Sie mir bitte helfen?

PS: Sie können meine "site" hier sehen:

\t body{ 
 
\t \t font-family:Arial, Helvetica, sans-serif; 
 
    margin:0; 
 
    padding:0; 
 
\t }

\t <div id="container" style="max-width:1164px; padding:0px 25px;"> 
 
    \t <div id="sections" style="background-color:#e7f0f3; width:100%;"> 
 
     \t <div id="house" style="display:inline-block; padding:30px 25px; zoom:1; *display:inline; vertical-align:top;"> 
 
     \t  \t <img src="http://i64.tinypic.com/vd3dyx.png" width="93" height="93" style="float:left; margin-right:25px; vertical-align:top;"> 
 
       <div style="float:left; vertical-align:top;"> 
 
        \t <h2 style="font-weight:bold; font-size:20px; display:inline-block;">Housing</h2> 
 
        <ul style=" clear:both; margin:0; padding:0; list-style-position: inside; font-size:14px; display:block;"> 
 
         <li>Aluguer por m2 ou por bastidor ou por unidade de U</li> 
 
         <li>Largura de banda de 10 Mbps até 1 Gbps</li> 
 
         <li>Backup e/ou Storage centralizados</li> 
 
         <li>Sala de Staging, cais de carga e descarga</li> 
 
        </ul> 
 
      \t </div> 
 
      </div> 
 
     \t <div id="disaster" style="display:inline-block; padding:30px 25px; zoom:1; *display:inline; vertical-align:top;"> 
 
     \t  \t <img src="http://i64.tinypic.com/vd3dyx.png" width="93" height="93" style="float:left; margin-right:25px;"> 
 
      \t <div style="float:left;"> 
 
        <h2 style="font-weight:bold; font-size:20px; display:inline-block;">Suporte para Disaster Recovery</h2> 
 
        <ul style=" clear:both; margin:0; padding:0; list-style-position: inside; font-size:14px; display:block;"> 
 
         <li>Housing Equipamentos Cold e Hot Stand-By</li> 
 
         <li>Tape Vaulting</li> 
 
         <li>Disponibilização de espaço de escritório para Disaster Recovery</li> 
 
         <li>Consultodoria</li> 
 
         <li>Serviços de ativação de desastre</li> 
 
        </ul> 
 
      \t </div> 
 
      </div> 
 
     \t <div id="house" style="display:inline-block; padding:30px 25px; zoom:1; *display:inline; vertical-align:top;"> 
 
     \t  \t <img src="http://i64.tinypic.com/vd3dyx.png" width="93" height="93" style="float:left; margin-right:25px;"> 
 
       <div style="float:left;"> 
 
        \t <h2 style="font-weight:bold; font-size:20px; display:inline-block;">Administração de Sistemas</h2> 
 
        <ul style=" clear:both; margin:0; padding:0; list-style-position: inside; font-size:14px; display:block;"> 
 
         <li>Análise e Desenho de procedimentos e de workflows</li> 
 
         <li>Implementação de regras relativas à segurança da Informação do cliente</li> 
 
         <li>Ferramentas e tecnologias operacionais de suporte</li> 
 
         <li>Análise de desempenho dos sistemas</li> 
 
         <li>Propostas de melhoria do desempenho dos sistemas</li> 
 
         <li>Análise e recomendações de preços /desempenho relativamente a novas aquisições ou upgrades</li> 
 
         <li>Carregamento, instalação e configuração de software</li> 
 
         <li>Suporte a problemas de comunicações</li> 
 
         <li>Coordenação, desenho e desenvolvimento de planos de suporte de acordo com as normas </li> 
 
         <li>Coordenação de diferentes níveis de suporte de diferentes fornecedores</li> 
 
         <li>Desenho e gestão de redes locais</li> 
 

 
        </ul> 
 
      \t </div> 
 
      </div> 
 
     \t <div id="disaster" style="display:inline-block; padding:30px 25px; zoom:1; *display:inline; vertical-align:top;"> 
 
     \t  \t <img src="http://i64.tinypic.com/vd3dyx.png" width="93" height="93" style="float:left; margin-right:25px;"> 
 
      \t <div style="float:left;"> 
 
        <h2 style="font-weight:bold; font-size:20px; display:inline-block;">Suporte para Disaster Recovery</h2> 
 
        <ul style=" clear:both; margin:0; padding:0; list-style-position: inside; font-size:14px; display:block;"> 
 
         <li>Suporte operacional no local</li> 
 
         <li>Verificação visual de equipamentosa</li> 
 
         <li>Substituição de componentes</li> 
 
         <li>Exemplo de comandos segundo instruções específicas</li> 
 
         <li>Monitorização de Sistemas 24/24h</li> 
 
        </ul> 
 
      \t </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 1

Wie @CZorio sagt, Sie brauchen einen Blick auf Medienanfragen zu bekommen, und Sie können auch über CSS-Einheiten lesen Einige Einheiten sind hilfreicher für reaktionsfähige Layouts als andere: http://www.w3schools.com/cssref/css_units.asp