-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

我认为这是非常基于意见的，但是可以。您可以body以像素为单位为填充，包装器以百分比为填充，然后修改相对数量，直到它们以您想要的方式出现。

例如，如果您在包装器上只有 2% 的填充，那么它在大屏幕上将是 38 像素，在小屏幕上将是 6 像素。但是如果你有 10 像素在机身上加上 1% 在包装上，那么它在大屏幕上是 29 像素，在小屏幕上是 13 像素。

于 2013-07-30T14:11:09.563 回答