-1

レスポンシブ デザインはある程度理解していますが、表示されるすべてのプラットフォームで適切に機能する電子メール テンプレートを作成しようとしています。私が含めたjsfiddleは、私が取り組んでいるアイデアです。マージンがより％ベースで機能するようにするにはどうすればよいですか。デスクトップでは大きく、電話では小さく見えるので、それらが % base であるという考えは好きではありません。マージンの自動をウィンドウにうまくフィットさせる方法はありますか?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="copyright" content="Copyright 2013 AAM Group.." />
<meta name="description" content="None" />
<title>NewsWire - Template</title>

<style>
    #wrapper { margin: 0 auto; width: 600px; }
    #subject { background-color: #CCCCCC; float: left; margin-right: 5px; margin-bottom: 5px; padding: 5px; width: 285px;  } 
    #viewBrowser { background-color: #CCCCCC; float: left; margin-left: 5px; margin-bottom: 5px; padding: 5px; text-align: right; width: 285px;  } 
    #header { background-color: #CCCCCC; float: left; height: 75px; margin-right: 5px; margin-bottom: 5px; padding: 5px; width: 425px; }
    #date { background-color: #CCCCCC; float: left; height: 75px; margin-bottom: 5px; padding: 5px; width: 150px; }
    #heroUnit { background-color: #CCCCCC; float: left; height: 225px; margin-bottom: 5px; width: 600px; } 
    #rightBlock { background-color: #CCCCCC; float: left; height: 315px; margin-bottom: 5px; margin-top: -165px; padding: 5px; width: 150px; } 
    #lowerRightBlock { background-color: #CCCCCC; float: left; height: 150px; margin-bottom: 5px; padding: 5px; width: 150px; }
    #banners { background-color: #CCCCCC; float: left; height: 75px; margin-bottom: 5px; width: 600px; }
    #footer { background-color: #CCCCCC; float: left; height: 75px; margin-bottom: 5px; padding: 5px; width: 590px;  }

    .content { background-color: #CCCCCC; float: left; height: 150px; margin-right: 5px; margin-bottom: 5px; padding: 5px; width: 425px; } 
    .roundCorners { border-radius: 5px; }
</style>

</head>

<body>

<div id="wrapper">
    <div id="subject" class="roundCorners">Subject Line</div>
    <div id="viewBrowser" class="roundCorners">View in Browser</div>

    <div id="header" class="roundCorners">Header</div>
    <div id="date" class="roundCorners">Date</div>

    <div id="heroUnit" class="roundCorners">Hero Unit</div>

    <div class="content roundCorners">Content Block</div>
    <div class="content roundCorners">Content Block</div>
    <div id="rightBlock" class="roundCorners">Content Right Block</div>

    <div class="content roundCorners">Content Block</div>  
    <div id="lowerRightBlock" class="roundCorners">Lower Right Content Block</div>  

    <div id="banners" class="roundCorners">Banners</div>

    <div id="footer" class="roundCorners">Footer</div>

</div>
</body>
</html>

http://jsfiddle.net/Pw3kV/

4

1 に答える 1

0

これは非常に意見に基づいていると思いますが、OKです。bodyピクセル単位のパディングとラッパーのパディングをパーセント単位で指定し、希望どおりになるまで相対的な量をいじることができます。

たとえば、ラッパーに 2% のパディングしかない場合、大きな画面では 38 ピクセル、小さな画面では 6 ピクセルになります。しかし、本体に 10 ピクセル、ラッパーに 1% を加えると、大画面で 29 ピクセル、小画面で 13 ピクセルになります。

于 2013-07-30T14:11:09.563 に答える