What is the difference those ways of writing media queries - media

Question

I see some people code directly the website for a desktop, but other after resenting all styles - start coding directly in media queries... for desktop, tablet and phone.
Is there any best practices or it's a preference?
wrapper {
width: 85%;
margin: 0 auto;
font: 90% Georgia, "Times New Roman", Times, serif;
}
.col1 {
float: left;
width: 40%;
margin-right: 5%;
}
.col2 {
float: left;
width: 25%;
margin-right: 5%;
}
.col3 {
float: right;
width: 25%;
}
#media screen and (max-width: 1280px)
wrapper {
width: 85%;
margin: 0 auto;
font: 90% Georgia, "Times New Roman", Times, serif;
}
.col1 {
float: left;
width: 40%;
margin-right: 5%;
.
..
...
}
Also if i write the media query for 5 different pages for example
#media screen and (max-width: 1280px)
/* Main Page */
wrapper {
width: 85%;
margin: 0 auto;
font: 90% Georgia, "Times New Roman", Times, serif;
}
.col1 {
float: left;
width: 40%;
margin-right: 5%;
/* Gallery */
/* Contacts */
Is it best way to use comments if the fail becomes to large so I don't get lost in it?

Answer 1

#user2852447, first you have to know about what is media query.
Responsive Design: serves the same HTML for one URL and uses CSS media queries to determine how the content is rendered on the client side. This removes the possible glitches of user-agent detection and frees users from redirects.
Now what is responsive design…?
 RESPONSIVE DESIGN: Responsive web design is a setup where the server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device using media queries.
A CSS media query we recommend to use for Smartphone’s is:
#media only screen and (max-width: 640px) {...} // it will render the screen view according to CSS define in this media query.
So we can use CSS Media Query to achieve responsive design for different devices.
 CSS MEDIA QUERY: By using the #media rule, a website can have a different layout for screen, print, mobile phone, tablet, etc.
Media Queries allow us to style elements for specific devices using attributes like resolution, aspect ratio, orientation and color index. Media queries are introduced in CSS3 and using this we are able to target specific screen sizes.
 MEDIA QUERIES ATTRIBUTES: We can identify the characteristics of the device(s) browser or hardware by combining media queries features. Some of them are as follows.
Device-width: The device-width feature targets the width display area (screen size) of devices. In print media, this feature targets the width of a sheet of a paper.
Device-height: The device-height feature targets the height of the display area (screen size) of devices. In print media, this feature targets the height of a sheet of a paper.
Resolution: Queries that use the resolution target a screen’s resolution in dots per inch (DPI) or dots per centimeter (DPCM).
Orientation: The orientation media feature describes devices that use either a landscape or portrait orientation. If the height of a devices screen or sheet of paper is higher than or equal to its width, then the orientation is portrait. When the width is greater than the height, the orientation is landscape.
Basically media query is a tool which can make an existing website mobile and tablet compatible.