文字のレイアウト、スニペットのセット

画像作成者MVBen



ロシアの顧客は、モバイルWebがニュースレターなどのサポートにお金を使うのに十分な勢いを得たことがついに明らかになりました。 あらゆる種類の電子メールクライアントやWebmordの動物園だけでなく、タブレットやスマートフォンでも適切に見えるような手紙を作成するために、彼らはますます私に頼ります。



作業の過程で、私はいくつかの既成のソリューションを蓄積しましたが、私自身が今すぐ指先に置いて、頻繁に使用しています。これを皆さんと共有したいと思います。

ラッパー

html

<table id="wrapper" align="center" width="600" cellpadding="20" cellspacing="0" style="border-collapse: collapse;"> <tr> <td> text </td> </tr> </table>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

css

 @media only screen and (max-width:600px) { #wrapper { width:100% !important; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

600ピクセルのレターラッパーを取得します。これは、幅が600ピクセル未満の画面で100％の幅に拡大されます。

テキストの折り返し

ポイントは簡単です。 ピクチャセルとインデントセルを備えたプレートを作成します。これは、ピクチャのテキストを打ち負かすものです。 モバイルプラットフォームでは、うなりを隠し、コンテナラッパーの幅全体に絵の付いたタブレットを引き伸ばします。



ちょっとした発言。 AndroidのGmailアプリケーションはmedia_queriesを理解せず、少し魔法で動作します。 また、文字のラッパーを画面の幅全体に拡大し、幅もパーセントで指定されたテーブルを拡大します。 唯一の方法は、ビートを隠すことができないことです。 しかし、これはそれほどひどいものではありません。



html

 <table align="left" class="picture" width="40%" cellpadding="0" cellspacing="0" style="border-collapse: collapse; float:left;"> <tr> <td valign="top"> <img style="width:100%;" src="picture.jpg" style="display:block;"> </td> <td class="float_fix" width="20"><img src="blank.gif" style="display:block;" width="20" height="20"></td> </tr> </table>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

css

 @media only screen and (max-width:320px) { .picture { width:100% !important; float:none !important; display:block !important; } .float_fix { display:none !important; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

よりエレガントなソリューションがある場合は、コメントしてください。

全角画像

ここではすべてが簡単です。 画像の幅を100％に設定してブロック化し、画像の前後に改行を追加します。

 <br> <img src="picture.jpg" style="display:block; width:100%;"> <br>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

中央の画像

一部のメーラーではアライメントが崩れるため、ブロッキングは使用しません。 小さい画面で画像を拡大するメディアクエリを作成します。



html

 <div align="center"> <img class="picture" src="picture.jpg" width="400"> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

css

 @media only screen and (max-width:400px) { .picture { width:100% !important; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

タイル

目的：商品に6つのブロックを（たとえば）配置して、小さな画面でお互いの下に落ち、画面のサイズに応じて伸縮するようにします。



元のタイル要素。6つの要素を乗算します。

 <table class="tile" align="left" width="33%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td> <table width="100%" cellpadding="10" cellspacing="0" style="border-collapse:collapse;"> <tr> <td> <a href="#" border="0" target="_blank" style="text-decoration:none;"> <img style="width:100%;" src="picture.jpg" border="0"> </a> </td> </tr> <tr> <td style="line-height:20px;"> <span style="font-family:georgia; font-size:14px; color:#333333;"> <a href="#" target="_blank" style="color:#000000 !important;"></a>  </span> </td> </tr> </table> </td> </tr> </table>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そしてそのためのCSS：

 @media only screen and (max-width:480px) { .tile { width:50% !important; } } @media only screen and (max-width:320px) { .tile { width:100% !important; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、デフォルトで3つの要素が得られます。画面の幅の<480pxで1行に2つの要素があります。 また、解像度が320px未満の要素の列。

最後に

特定のデバイスに登録するために必要なメディアクエリを理解するために、すばらしいbadooブログトピックからバッジを引用します。 さて、より詳細な研究のためにここの資料を読むことを強くお勧めします。