Responsive Design and @media queries

Question

I thought my HTML/CSS guns were loaded and good to go; and then I started reading about responsive web design!
If I have a rule declared in the main body of my CSS and add a media query what happens to the existing rule?
It looks to me with my experimenting so far that if I take a style in the main section and duplicate that with some edits for a smaller width, I have to then remove it from the original and replicate it in another @media query.  Is that correct? 
So if I have this:
header {
    background: url("images/headerhand.png") no-repeat scroll left top transparent;
    height: 300px;
    margin: 40px auto 0;
    min-height: 300px;
    text-align: left;
    width: 100%;
I need to put this in a @media query for the below break point:
header {
    background: none;
    height: 300px;
    margin: 40px auto 0;
    min-height: 300px;
    text-align: left;
    width: 100%;
I then take the rule out of the main section of my style sheet and put that in another media query for the above break point.
So if I have a header element with background image and color, and border-radius and whatever but only want to lose the background image at a certain break point, I then need two @media queries one for below the break point and one for above and then remove the whole rule from the main section of the site?
Oh my, that was so complicated, I am not sure I even understand my own question!
Martin
PS "Mobile First" is starting to make a lot of sense!

Answer 1

osgood_ wrote:
pziecina wrote:
Hi Os
As an example, (using Jennys Chocolate Cookies) would it not make more sense to design a mobile only web site, complete with geolocation that shows the nearest outlet selling the cookies?
So you are saying forget the desktop monster (assign that to the bin) and convince the client mobile is the way to go? Even if that is the case it still seems that you're going to need two or three different design set ups to satifsy the majority of devices, which means more expense, right? Plus from what I've seen the information all crushed into a 400px wide screen looks a bit shite, no?
Reply -
No I am saying that one should offer the type of site/service that best suits the clients needs, be this a desktop, responsive or mobile only web site, or even telling the client that an advert in yellow pages would be better.
pziecina wrote:
The same may also apply to a restaurants web page, after all it is often the directions to the restaurant, and its proximity to oneself that are important when one is looking for somewhere to go out for a meal, is it not?
Can't see what location or direction has to do with anything or proximity to oneself. I look in yellow pages if I need a restaurant or I identify it on the computer before I go out........but then again I'm old so maybe younger people do all this whilst they are out. So we come down to demographics - cut out whatever section of society at your own peril. I guess a nightclub would be a better example, can't see many 50 plus year olds wanting to know where one of those are on the move.
Reply -
So you are out and about, or driving home and suddenly decide that you would like to go for an Indonesian meal, do you now get the yellow pages out?
BTW - I am over 60.
pziecina wrote:
As for testing on mobile devices, a good testing set-up now costs less than £400, ($600) and most items one will already own.
They are -
1  A smartphone, (most people have one now and a good budget smartphone can be purchased for under £70.00)
2. A tablet device, (An budget android device now cost about £120.00, and can also be used as an e-reader)
3. A iPod-Touch (If it works on this it will also work exactly the same on the iPhone)
Well I guess you have to factor in the cost of getting connected to the net on these mobile devices to check everything. I dunno if anyone in the UK offers a reasonable monthly package whereby you can be connected to all these devices 24/7 and not rack up any additional charge per minute.
Reply -
Use Shadow and your home wifi network, extra cost nothing.
PZ