Often when the width of a browser becomes too narrow the design starts to break down. Now, lets make the window half the width of the screen (621x760) and we can see the following screenshot.įluid grids are an important part of responsive design.
W3 RESPONSIVE COLUMNS CODE
If we modify the code it should now look like the following. So this makes the fluid formula very easy as shown below. So we will base our calculations on the 960 pixel baseline. We want our resulting fluid grid to have the same proportion as the current design. This page defines a container of 960 pixels. Lets see how this formula works by converting the simple page we created earlier.
The proportional CSS rule as a percentage. The size of the containing control in pixels. Here are the important parts of the formula that you should keep in mind.
This way when a layout is squeezed onto a small device or stretched across a huge screen, all of the elements in the layout will resize their widths in relation to each other.Ĭonverting a pixel based layout to a proportional design isnt incredibly complicated but does require some math as shown in the following formula. This means that a 50% width will always take up half the screen. Instead of designing a layout based on a rigid set of pixels a fluid grid is designed in terms of percentages (%). A quick review of CSS shows that in addition to pixels it also supports the following measurement types.ġ ex is the x-height of a font (x-height is usually about half the font-size)Ī liquid or fluid grid goes beyond the traditional layout. When designing a responsive site every aspect of the site needs to be scaled appropriately. Now, lets make the window half the width of the screen (612x760) and we can see the design gets cut off as shown in the following screenshot.
W3 RESPONSIVE COLUMNS FULL
When run in full screen (1296x776) the HTML produces the following screenshot. Lorem ipsum dolsum Lorem ipsum dolsum Lorem ipsum dolsum Lorem ipsum dolsum Lorem ipsum dolsum Lorem ipsum dolsum Lorem ipsum dolsum Lorem ipsum dolsum Lorem ipsum dolsum Lorem ipsum dolsum Lorem ipsum dolsum Lorem ipsum dolsum Lorem ipsum dolsum Lorem ipsum dolsum Lorem ipsum dolsum Lorem ipsum dolsum Lorem ipsum dolsum Lorem ipsum dolsum Lorem ipsum dolsum Lorem ipsum dolsum Lorem ipsum dolsum Lorem ipsum dolsum Lorem ipsum dolsum Lorem ipsum dolsum Lets start by taking a look at a simple 960 pixel based HTML page with an inline CSS using the code shown below.įont: normal 100% Cambria, Georgia, serif Why? The number 960 makes for a lot of clean divisions utilizing a whole number when factoring column widths and margins and technically fits nicely on a majority of screens. The 960 pixel grid system is probably the most commonly used. A quick Google search can reveal that there is no shortage of grid systems. A traditional web design defines a number of pixels across a page and then lays out the content to match the grid design. Grids solve the basic problem of alignment. In this second blog post we will look at the basics of fluid grid layouts and how they are used for designing responsive sites. We saw there were three major components fluid grid layouts, CSS 3 media queries, and fluid images and media. In the previous post, Introducing Responsive Design we explored the basic concepts of a responsive website.
0 kommentar(er)
