comparison of fluid grid and media queries

As someone who is just beginning to delve into the world of responsive web design, I hope you can bear with me as I ask what may seem like a silly question. My task at hand is to convert an existing desktop website into a responsive design. After doing some research online, I came across two methods - Fluid grid and Media queries. However, I am unsure which approach would be best for this project, or if I should consider utilizing both in order to create a truly responsive site. From my understanding, Fluid grid allows for webpages to adapt to different viewport sizes, while media queries enable the display of different content (such as images or text) based on the available space in various browser sizes (whether manually resized or viewed on mobile/tablet/desktop browsers). Please feel free to correct me if I have misunderstood any of these concepts.

Thank you in advance for your guidance!

htmlcssresponsive-designmedia-queriesfluid-layout

Answer №1

Fluid grid systems offer some flexibility within a limited resolution range, but for a truly responsive layout that caters to various devices, media queries are essential. Grid systems provide the foundational structure for layouts, while responsive grid systems utilize both media queries and structural grids. These two technologies serve different purposes and play distinct roles in web design.

The evolution of grid systems traces back to fixed grids, with common setups featuring 960px width divided into 12 or 16 columns. As display resolutions grew from 1024px to 1920px, fluid grid systems emerged to accommodate this increased variability. Regardless of being fixed or fluid, grid systems play a crucial role in establishing the layout's framework.

Media queries extend the responsiveness to an extensive range of resolutions, spanning from mobile devices to large screens like plasma TVs. Their primary function in Responsive Web Design (RWD) is to identify the device type and apply customized styles accordingly.

While integrating both grid systems and media queries poses challenges, such as columns becoming too narrow on smaller screens, modern solutions involve stacking columns using media queries. CSS classes can also be employed to adjust column count or hide elements based on detected device specifications through media queries.

By combining these diverse technologies, designers can achieve structured layouts (via grid systems) that offer optimal user experiences across a broad spectrum of devices (using media queries).

Answer №2

Responsive layouts rely on CSS to adjust page size, regardless of the approach taken.

Ultimately, it all leads to the same outcome.

Media Queries analyze browser size and introduce additional CSS accordingly.

Alternatively,

The viewport brings in CSS tailored to the device's width.

@viewport {
width: device-width;
}

The simplest way to handle a layout, especially if it's straightforward, is to make it fluid with a 100% width and gradually incorporate media queries for customization like this:

@media screen and (min-width: 960px){
your css goes here
}

It all boils down to CSS, whether it involves switching between CSS files based on various factors such as browser, browser size, type, or device width.

In essence, there are no strict rules!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Maximizing the potential of a single .js file for multiple .html pages with AngularJS

I have a JavaScript file containing a function that I want to be accessible by multiple HTML pages without duplicating it in another file. Currently, the JS file starts with the following code snippet: (function(){ var app = angular.module('Proj ...

javascripthtmlangularjs

Strategies for storing component data within an Angular service

Recently, I have implemented a dice game feature using Angular. The outcome of the dice rolls is stored in a TypeScript array and then displayed on the HTML page. However, I have been tasked with persisting these results even if I navigate to another pag ...

htmlangulartypescriptbootstrap-5

The height of my "img" element is not being fully matched by my "a" tag

As part of a project redesigning the Kurzgesagt home page, I encountered a challenge when trying to make my a tag stretch the full height of my img. The a tag was wrapping the img in the HTML code. Below is the code I used: HTML <a href="http://kurzg ...

htmlcss

Bug with the animation of height in Jquery

Unfortunately, I can't share my entire source code here because it's quite lengthy. However, maybe someone can provide some insight into a common issue that may be happening elsewhere. The problem I'm facing is with a DIV element that has r ...

jqueryhtmlcssanimation

Issue with positioning content

Hey everyone, I'm currently developing a website and encountered an issue with placing content inside the body tag within a div element. I attempted to place the div inside the body tag, but the outcome was unexpected: https://i.sstatic.net/2zjqf.jp ...

htmlcsstwitter-bootstrap

The placement of the content in the Grid system seems to be off-kilter, not aligning properly with Bootstrap standards

I am facing an issue with the logo and navbar layout in my design. The design has 3 columns for the logo and 6 columns for the navbar, as shown in this image: https://i.stack.imgur.com/RpmJm.jpg However, when I run the code, they do not appear in the cor ...

htmlcssbootstrap-grid

What are some methods for creating full-page background images?

I attempted to apply a background image to the body element using the following CSS code: body { background: url("http://beerhold.it/1024/800") center bottom; z-index: 10; height: 100%; background-repeat: no-repeat; ...

htmlcss

I'm curious to know where in the CSS specifications it is specified how multiple properties with the same name should be handled

While debugging an unrelated issue, I want to make sure I understand how a browser is supposed to handle a declaration like background-image: url(image0.jpg); background-image: image-set(url(image1.jpg) 1x, url(image2.jpg) 2x); I tried looking in the CSS ...

css

Removing the nested UL element while preserving the child elements

Looking to simplify a nested list structure by removing the <ul> tags and moving its child <li> elements to the parent <ul> element. Here is an example : <ul> <li>Item 1</li> <ul> <li>Item 2& ...

javascriptjqueryhtml

How to use PHP and JavaScript to update a location marker on Google Maps

I'm new to web development and in need of some help, please. I have a code that is supposed to update the marker location with coordinates retrieved from a database. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AP ...

javascriptphphtmlajaxgoogle-maps-api-3

Angular 6 - applying a class when reaching a specific section

When scrolling down to a section, I want to dynamically add the class .active to an element. Currently, I have two sections where clicking on a link with href="#o-nas" takes me to the corresponding <section id="o-nas">...</section>. However, I ...

angularhtml

The disappearing drop-down form issue arises when utilizing AJAX to fetch data from a MySQL database using a PHP file

Using AJAX to fetch data from a MySQL database via a PHP file and display it in a dropdown menu based on the user's initial selection is working smoothly. The second dropdown populates correctly as intended. However, an issue arises when an option is ...

javascriptphphtmlmysqlajax

Guide on making a submit and close button within an overlay

Seeking a button to both submit and close an overlay window. The button code is as follows: <a href="javascript:additem('Info to add here', 10.00,1);" role="button"><button class="purchase btn btn-warning">Select</button></ ...

javascripthtml

What could be causing the decreasing opacity of lines at the edge of my HTML5 canvas?

I have embarked on the journey of creating a bar graph using an HTML5 canvas. The process involves a series of lines drawn with the help of .moveTo(), .lineTo(), and .stroke(). Below is the code snippet I am using for this purpose. Although I am new to wo ...

javascripthtmlcanvashtml5-canvas

There is a noticeable absence of CSS on the Django admin page

After installing django 1.7 and creating a new project and application, I set up a new superuser. However, when I attempt to log in to my superuser account, the Django administration page appears without any CSS styling. I'm not sure where I went wron ...

pythoncssdjango

Using the `type=file` input in Internet Explorer 11

Encountering an issue with the input type file on IE11. In IE11, the input field is displayed as two tab-able pseudo elements (text/button). Tried using the class ::-ms-browse to hide the button with display: none, but it remains tab-able. To replicate: ...

javascriptjqueryhtmlcssinternet-explorer-11

How can I force a variable width font to behave like a fixed width font in HTML?

Is there a method to emulate the appearance of a fixed-width font using a variable width font in HTML? For instance, if I were to display the phrase "The quick grey fox jumped over the lazy dog" in "Courier New," a fixed-width font, it would appear wider ...

htmlcsstypography

Working with Ember.js to manage relationships using a select element (dropdown) for create/edit operations

I'm trying to establish a relationship through a dropdown in my Ember application. Here is my Books model: import DS from 'ember-data'; export default DS.Model.extend({ // Relationships author: DS.belongsTo('author'), name ...

javascripthtmlember.jshandlebars.js

Different divs exhibit similar id and class while each being distinct from one another

Whenever I click on a number in this link, it is supposed to show its own id or class, but it always shows the same one. When I check childrenImg in the console, all the ids and classes are different. Additionally, I am trying to replace the image with ano ...

javascripthtmljqueryclass

-moz-box-reflect - Styling for FireFox

I've been attempting to achieve a similar effect to this tutorial at http://designshack.net/tutorialexamples/HoverEffects/Ex5.html. However, I'm encountering issues with getting the reflection of the image to display properly in IE and Firefox. H ...

htmlcssinternet-explorer