CSS: Difference between revisions
m added Category:Web Development using HotCat |
adds example |
||
| Line 1: | Line 1: | ||
Cascading Style Sheets is one of the primary technologies used in the web. CSS provides the style/appearance aspect of your HTML. | Cascading Style Sheets is one of the primary technologies used in the web. CSS provides the style/appearance aspect of your HTML. | ||
{{Feature | {{Feature | ||
|explains= CSS | |explains= CSS | ||
| Line 8: | Line 9: | ||
}} | }} | ||
== Example: mobile layout with 2 columns == | |||
A change to use percentages and 'em's instead of hard pixel widths or font size would achieve a more fluid layout. Basically, always use em for font size. Only use px when you know the exact dimensions of something (like setting a negative margin for a graphic) | |||
To really get what you want (a responsive layout that is designed to work well in print and a variety of devices), you should use the 'media' selector, in combination with 'media queries' <ref>good list of various approaches at https://gist.github.com/dustinboston/3867516 </ref> | |||
CSS like the following would be good: | |||
<source lang="css"> | |||
@media (min-width: 55em) | |||
{ | |||
.main | |||
{ | |||
float: left; | |||
width: 65%; | |||
margin-right: 5%; | |||
margin-bottom: 1em; | |||
} | |||
.aside | |||
{ | |||
float: left; | |||
width: 30%; | |||
margin-bottom: 1em; | |||
} | |||
} | |||
</source> | |||
Note how both columns are floated "left" which means that when your math or the browser isn't broken and the percentages <=100% they are side by side. This side-by-side layout is only applied to devices that have a screen width of 880 pixels <ref> 55em translates to 880px for the browser default font size of 16px. https://css-tricks.com/css-font-size/</ref> | |||
Example at http://maxdesign.com.au/jobs/css-layouts/12-example-layout-two-full/ and source at | |||
https://github.com/russmaxdesign/example-layout-two-full | |||
{{References}} | |||
[[Category:Web Development]] | [[Category:Web Development]] | ||