Multiple Ad/Creative Sizes in DFP

I'm wondering how one would go about creating different ad / creative sizes for different browser widths / screen resolutions in DFP. I found this DFP article regarding this issue, but it was specifically for mobile users, and they do not give any code, rather just a method. Here is the article:

http://support.google.com/dfp_premium/bin/answer.py?hl=en&answer=2615435

In it they give a code method that looks like this:

if screen size < 300px
ad tag size = 216
else if screen size < 600px
ad tag size = 300
else
ad tag size = 600

But this article was for mobile ads only. :( Here is a jsfiddle of my ad image: http://jsfiddle.net/EptwH/3/

If anyone could inform me on whether or not there is a method to have multiple creative/ad sizes for different browser widths, that would be amazing. And one more thing to add, I do not COMPLETELY want to change the ad dimensions, the ratio will stay the same... so for example, I'd like a 100x50 ad, then a 200x100, then a 300x150, then a 400x200 etc. If anyone could help me out, or let me know if this is even possible....that would be amazing!

Solution

If you see the JS code that DFP asks you to embed into your page, they are split into three "phases" :

first you define the available slots on the page
second you enable the service
third you ask the slots to be filled.

In the very first step, you can have some conditional code. So you could replace this statement :

googletag.defineSlot('/1234567/my_slot', [728, 90], 'gpt-apps-large').addService(googletag.pubads());

with a conditional :

if(window.width>728) {
   googletag.defineSlot('/1234567/my_slot', [728, 90], 'gpt-apps-large').addService(googletag.pubads());
} else {
   googletag.defineSlot('/1234567/my_slot', [468, 60], 'gpt-apps-large').addService(googletag.pubads());
}

Edit: Bonus tip -- use the information here https://support.google.com/dfp_sb/bin/answer.py?hl=en&answer=181070 to debug your ad delivery.