To be honest I rarely set specific widths at all. I will use a container with a max-width set at something like 1200px (approx) as very wide sites are generally hard to read unless you re-arrange the content into smaller columns. Then the content can sit inside that using percentages for the side column and no size on the main column so that it just fills the area as required. I would usually set a min-width on a side column so that it fits nicely into a 320px viewport and doesn’t get squashed too small. No media queries are required so far for this to work across the whole range. At smaller widths you may want to make the two columns into one column and that would mean simply removing the float at a point in the design that looks good.
If you want full viewport width images then you can start with a 100% wide element and then just just nest the content portion of the html inside a max-width container.
When you have a navigation across the top of the screen (like yours) then avoid using content + padding + widths to make it fit. You can use the display:table-cell properties to make the nav fit the whole width without the need for padding or widths at all. This means the nav will grow and shrink across a very wide range. You will only need to add a media query when the content no longer fits and not every few pixels.
Designing like this makes things so much easier as you are not forcing things into fixed boxes but letting it flow as required. Some simple layouts can scale right down to 320px without the need for a single media query.
Of course you can tweak things as you go as on a wide screen you may want more columns and on a small screen only one column. You may have very large fonts in the wide screen which would be out of place on a small screen so feel free to tweak but remember that fonts look smaller on a mobile so 13px fonts on a mobile are hard to read so don’t just keep decreasing font-size to make something fit.
Responsive web design is what you get when you don’t do anything.
Create a page and fill it with text, Add no styles at all. That page is now totally responsive (assuming the viewport meta tag is present). It will of course look pretty bland so now it is your job to maintain that responsiveness while making the page look more attractive. All web pages are responsive until the developer gets hold of them 
The viewport is always 100% wide and 100% high so for width you just need to ensure that your content will fit in that width no mater what the size. For images this may mean setting width:100% and height:auto. Usually though we are talking about background images and you can just use background-size:cover.
100% height is a different matter and for mobiles this really isn’t something to consider but just to ensure that the image is not massive. If it needs to be an initial 100% high image then use a display:table container set to 100% high and use a background image set to cover. You can then if you want select a smaller image for mobile if it requires it but generally it is best to avoid making the mobile download two images (responsive images is another question and there have a been a few other threads recently talking about this so do a search for responsive images).
If I understand correctly then you are saying that on an ipad in landscape mode then the height of the window is not that tall and so the header may seem big in comparison. If so then the analogy remains the same as on the desktop because I never have my browser maximised. At the moment the message I am typing this into has a browser height of 500px so you should be taking the same care of me as you are for your ipad in landscape.
This can be done by throwing in a media query based on the height (min-height or max-height) of the viewport and if the viewport height is small then you can make things smaller as required. Generally though you would avoid having to do this as you could end up making too much work for yourself but it is easily possible. Again there is no need to cater for specific devices but you can use the height of the ipad as a guide for your change.
I often use height media queries when I have a fixed sidebar that is perhaps xxem (or xxpx) tall and then I will set that sidebar to be not position :fixed when the viewport is smaller (because otherwise fixed positioned content that is outside the viewport is unreachable).
So to summarise you can use a max-height media query to make your header smaller for devices that have smaller heights (just choose a suitable height breakpoint when you think the design looks odd or not right). You can do this in the browser and tweak as required. Remember though that when you over-ride styles in the media query make sure you the rules are sound. Changing line-height on a child will not affect the line-height of the parent and changing the height may mean things don’t fit (which comes back to my original point of not setting things in stone and letting content flow as that makes it easier to adjust later on.)
None of the above is set in stone so you can tweak and adjust as required but the less control you have imposed over your design then the easier it is to change via media queries. The secret is to make it look like you want without resorting to fixed techniques everywhere.
