html - 如何在智能手机上更改此代码

标签 html css magento

如何在 smartphone 上将两栏页面调整为一栏?目前它仍然使两列在 smartphone 上文本框变薄。

我在 magento 工作,所以我将 css 写入 html。

https://jsfiddle.net/mastervision/47jtcxrm/

<!DOCTYPE html>
<html>
  <head>
    <style> 
      .newspaper {
        /* Chrome, Safari, Opera */
        -webkit-column-count: 2;
        -webkit-column-gap: 40px;
        -webkit-column-rule-style: outset;
        -webkit-column-rule-width: 1px;

        /* Firefox */
        -moz-column-count: 2;
        -moz-column-gap: 40px;
        -moz-column-rule-style: outset;
        -moz-column-rule-width: 1px;

        column-count: 2;
        column-gap: 40px;
        column-rule-style: outset;
        column-rule-width: 1px;
      }
    </style>
  </head>
  <body>


    <div class="newspaper">
      <p><strong><span style="font-size: x-large;">TEST FAQ - h&auml;ufig gestellte Fragen</span><br /></strong></p>
      <p><strong><br /></strong></p>
      <p><span style="font-size: medium;"><strong>STOCK 11 ist Masskonfektion&auml;r. Was bedeutet das genau?</strong></span></p>
      <p><span style="font-size: small;">Masskonfektion heisst, ausgehend von Standard-Schlupfteilen eine in Bezug auf Mass und Design genau auf den Kunden abgestimmte Kleidung zu fertigen. Das Team von Stock 11 macht es sich nicht leicht f&uuml;r seine Kunden den perfekten &bdquo;fit&ldquo; hinzubekommen. Mit 11 Mass-Variablen f&uuml;r Hemden und 18 f&uuml;r Anz&uuml;ge sowie zahlreichen Gestaltungsoptionen f&uuml;r Designvarianten kommen wir sehr nah an eine Feinmass-Fertigung heran.<br /></span></p>
      <hr />
      <p><strong></strong><span style="font-size: medium;"><strong>Wie ist der Bestellprozess bei STOCK 11?</strong></span></p>
      <p><span style="font-size: small;">Sie vereinbaren einen Termin bei uns an der Stockerstrasse im Herzen von Z&uuml;rich. F&uuml;r&nbsp;Ihren Besuch bei uns im Atelier&nbsp;nehmen Sie sich bitte&nbsp;eine Stunde bis 90 Minuten Zeit. So bleibt uns&nbsp;gen&uuml;gend Zeit um 1) Ihre K&ouml;rpermasse zu nehmen, 2) Ihre Pr&auml;ferenzen bez&uuml;glich Stil und Details zu besprechen und 3) passende Stofffabrikate auszuw&auml;hlen. Wir&nbsp;leiten Ihre&nbsp;Bestellung umgehend an unsere Manufaktur-Partner weiter.&nbsp;Sobald Ihre Kleidung bei uns eingetroffen ist werden wir Sie f&uuml;r eine Anprobe einladen. Daf&uuml;r nehmen Sie sich bitte wieder 30 Minuten Zeit. Wenn es noch &Auml;nderungen geben sollte, werden wir diese&nbsp;innert wenigen Tagen in Z&uuml;rich umsetzen und Sie kommen f&uuml;r die finale Anprobe bei uns vorbei. Bei Erstbestellungen von drei Hemden oder mehr empfehlen wir zun&auml;chst nur ein Hemd zu bestellen. Vielleicht sind noch Kleinigkeiten, die optimiert werden k&ouml;nnen.</span></p>
      <hr />
      <p><span style="font-size: medium;"><strong></strong><strong>Wie lange dauert es, bis mein Hemd/Anzug zur Anprobe bereit ist?</strong></span></p>
      <p><span style="font-size: small;">Gut Ding will Weile haben. In der Regel sind unsere Anz&uuml;ge und Hemden innerhalb von&nbsp;vier bis sechs Wochen zur Anprobe bereit. Wenn&nbsp;nach der Anprobe &Auml;nderungen&nbsp;n&ouml;tig sind, werden wir diese innert&nbsp;f&uuml;nf Arbeitstagen&nbsp;f&uuml;r Sie erledigen. Express-Fertigungen sind gegen Aufpreis m&ouml;glich. Express bedeutet: 2 Wochen f&uuml;r Anz&uuml;ge und Hemden.</span></p>
      <hr />
      <p><strong><span style="font-size: medium;">Muss ich bei Nachbestellungen wieder im Laden vorbeikommen?</span> </strong></p>
      <p><span style="font-size: small;">K&ouml;nnen Sie, wir freuen uns in jedem Fall &uuml;ber Ihren Besuch... Sie k&ouml;nnen aber bequem von zu Hause aus bestellen (telefonisch oder per e-mail).&nbsp;Ihre K&ouml;rpermass-Daten&nbsp;haben wir bei Ihrem letzten Besuch erfasst und festgehalten. Falls sich Ihre K&ouml;rpermasse nicht ge&auml;ndert haben, k&ouml;nnen wir f&uuml;r Sie die aktuell passende Kleidung klonen. Die&nbsp;Stoffauswahl finden Sie&nbsp;online und sie k&ouml;nnen sie dort in Ruhe durchbl&auml;ttern.</span></p>
      <hr />
      <p><strong></strong><span style="font-size: medium;"><strong>Woher nimmt STOCK 11 die Stoffe f&uuml;r Hemden und Anz&uuml;ge?</strong></span></p>
      <p><span style="font-size: small;">Unsere Premium-Stoffe beziehen wir haupts&auml;chlich aus f&uuml;hrenden Manufakturen in Italien. F&uuml;r Anzugstoffe verwenden wir&nbsp;Garne der f&uuml;hrenden Marken Ermenegildo Zegna, Drago, Vitale Barberis oder Loro Piana. Diese werden fast ausschliesslich in der Textilhochburg Biella (Italien) gewebt. Unsere Hemdenstoffe werden aus aus reiner &auml;gyptischer Baumwolle oder wie bei den Sea Island Cottons aus Baumwolle von den West Indies hergestellt. In unserer Sartorial Line verwenden wir ausschliesslich 80s - 200s Baumwolle, die von einem der &auml;ltesten und gr&ouml;ssten Traditionsbetriebe in Norditalien hergestellt wird.</span></p>
      <hr />
      <p><span style="font-size: medium;"><strong>Wo produziert STOCK 11 Hemden &amp; Anz&uuml;ge?</strong></span></p>
      <p><span style="font-size: small;">Unsere sorgf&auml;ltig ausgew&auml;hlten Manufakturpartner f&uuml;r Anz&uuml;ge befinden sich in Italien und&nbsp;Deutschland. Die Hemden werden vorwiegend in Italien gefertigt (Sartorial Line&nbsp;&amp; Infinity Line).&nbsp;F&uuml;r Business Line Hemden arbeiten wir mit einer jungen, nachhaltigen Manufaktur in Bangkok zusammen.</span></p>
      <hr />
      <p><span style="font-size: medium;"><strong>Wie detailliert kann ich mein Hemd/Anzug mitbestimmen?</strong></span></p>
      <p><span style="font-size: small;">Kurzantwort: Extrem detailliert. Auf&uuml;hrliche Antwort: Die Individualisierung bei STOCK 11 kennt fast keine Grenzen. Nebst unserem Anspruch, Ihnen das perfekt passende Hemd oder den perfekt passenden Anzug zu schneidern, haben Sie bei STOCK 11 extrem viel Freiheiten Ihre individuellen Vorstellungen umzusetzen. Um Ihnen eine Idee zu geben: F&uuml;r ein Hemd beispielsweise k&ouml;nnen Sie bei uns aus &uuml;ber 2&lsquo;500 Stoffen, 12 Kragentypen, 18 &Auml;rmel-Designs blabla w&auml;hlen. Bei Anz&uuml;gen/Vestons haben wir aktuell 500 verschiedene Stoffe im Angebot. Und hier gehen die Optionen f&uuml;r die Individualisierung noch viel weiter. Es f&auml;ngt an beim Stil (englisch, amerikanisch oder italienisch, Einreiher, Zweireiher etc.), Revers-Art, 8 Stufen der Schulterpolsterung, Anzahl und Art der Kn&ouml;pfe, 8 verschiedne Taschen/Taschentypen innen und aussen... und vieles mehr.</span></p>
      <hr />
      <p><span style="font-size: medium;"><strong>Was bedeutet die STOCK 11 Fitting-Garantie?</strong></span></p>
      <p><span style="font-size: small;">Erst wenn Ihnen unsere Produkte wie eine zweite Haut passen geben wir uns zufrieden. Nach dem Fitting werden wir &Auml;nderungen von unseren Schneider-Partnern in Z&uuml;rich zeitnah (innert f&uuml;nf Arbeitstagen) umsetzen.</span></p>
      <hr />
      <p><span style="font-size: medium;"><strong>Gehen Sie auch auf Spezialw&uuml;nsche ein?</strong></span></p>
      <p><span style="font-size: small;">Selbstverst&auml;ndlich gerne wenn es innerhalb unserer M&ouml;glichkeiten liegt (und diese sind gross)! Der Mensch und seine Individualit&auml;t stehen bei unserem Tun im Zentrum. Wir sind kein online Masskonfektionshaus, welches sich mit einer ungef&auml;hren L&ouml;sung zufrieden gibt. Wir denken langfristig und sind bem&uuml;ht, eine freundschaftliche Vertrauensbasis mit unseren Kunden zu pflegen.</span></p>
      <p><span style="font-size: small;"><br /></span></p>
    </div>

  </body>
</html>

enter image description here

最佳答案

您可以使用媒体查询来执行此操作:

JSFiddle

.newspaper {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 2;
    -webkit-column-gap: 40px;
    -webkit-column-rule-style: outset;
    -webkit-column-rule-width: 1px;

    /* Firefox */
    -moz-column-count: 2;
    -moz-column-gap: 40px;
    -moz-column-rule-style: outset;
    -moz-column-rule-width: 1px;

    column-count: 2;
    column-gap: 40px;
    column-rule-style: outset;
    column-rule-width: 1px;
}

@media only screen and (max-width: 40em) {
    .newspaper{
        /* Chrome, Safari, Opera */ 
        -webkit-column-count :  1 ; 
        -webkit-column-gap :  0px ; 
        -webkit-column-rule-style : outset ; 
        -webkit-column-rule-width :  1px ;

        /* Firefox */ 
        -moz-column-count :  1 ; 
        -moz-column-gap :  0px ; 
        -moz-column-rule-style : outset ; 
        -moz-column-rule-width :  1px ;

        column-count :  1 ; 
        column-gap :  0px ; 
        column-rule-style : outset ; 
        column-rule-width :  1px ; 
    } 
}

任何你想要在小屏幕上工作的东西都需要在这个媒体查询中:

@media only screen and (max-width: 40em) {
    /* Code */
}

关于html - 如何在智能手机上更改此代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30730241/

相关文章:

php - Magento - 无法删除 css 鼠标悬停效果

css - 帮助正确设置 CSS 格式

javascript - 该网站如何在您离开之前显示一个简洁的 HTML 框

javascript - 为动态加载的html添加一个类

css - 在图像( Logo )上创建光扫描效果( Shiny )

javascript - 如何在 magento1 CMS 页面布局中调用或包含皮肤 JS 文件?

html - (S)CSS 架构 : alternative backgrounds styling

css - 如何使用CSS Sprite ?

jquery - Bootstrap 的侧边栏带有固定页脚和可滚动 div

magento:从前端添加产品