Responsive webpage design using w3.css

Simply speaking, responsive webpage design is laying elements on a web page in different manners for different browser’s sizes using the same piece of html code. For example, on large screen, you may want to place 3 elements side by side on one row, but on small screen, you may want to place one element¬† on each row and the 3 three elements are stacked over each other from top to bottom because if they squeeze into one row, the size of each element would be too small to see clearly. You do not need to prepare two versions of the html code to serve requests from devices of different screen size. Instead you can use responsive design to write one piece of code. This code will present differently on screens of different size. W3.CSS is a css file that can be used to implement the responsive design of web pages.

The chapter and the chapter of the w3schools’ tutorial are good materials to learn responsive design with w3.css. The framework of writing responsive code using w3.css is:

<div class="w3-row">
<div class="w3-col s12 m6 l3">xxxx</div>
<div class="w3-col s12 m6 l3">xxxx</div>
</div>

The important concept here is the 12-column grid. If you use the class “w3-col”, the block element is assumed to be a column of a 12-column row system. The confusion is that it does not mean the column occupies 1/12 of the width of the row.¬† “w3-col” alone does not specify how wide the column is. If you do not use sxx,mxx,lxx classes, the column will occupies 100% of the row on all sizes of screens, which means every row has only one column. However, you can use sxx,mxx,lxx classes to specify how wide the column is on different sizes of screens. For example,<div class=”w3-col s12 m6″></div> will occupy 12 columns of the hypothetical 12-column row, (which means the element occupies the whole row), on small screens, but only occupies 6 columns (half of the row) on medium screens. How about large screen? Since you do not specify a lxx class, it will default to l12, which means occupying 12 columns(a whole row) on large screens.

 

 

Comments are closed, but trackbacks and pingbacks are open.