I'm very new to responsive web design, so please excuse me for this dumb question. I have to build an existing desktop website to responsive design. After googling I have found two ways - Fluid grid and Media queries. However I'm confused which approach I should follow or do I need to use both to develop responsive site. As per my understanding, Fluid grid is used to display webpages according to different viewport but media queries is used to put different content(images, text) according to the room available in different sizes of browser (making browser smaller manually or from mobile/tablet/desktop browser). Please correct me if I am missing something here.
Thank you for help!
What you have to understand is that all responsive layouts always use css to resize the page.
its all at the end the same.
Media Queries detect the size of the browser and loads in additional css.
OR
Viewport load in css based on the device width
@viewport {
width: device-width;
}
essentially the easiest way to approach a layout if its simple is to make it fluid/100% width and as you need more customization add media queries like this
@media screen and (min-width: 960px){
your css in here
}
its all css, like loading a different set of css files by detecting browser/browser-size/browser-type/device/ device width.
there are no rules!