Media queries and frameworks
Download as PPTX, PDF1 like2,778 views
This document discusses responsive design and CSS frameworks. It explains that responsive design allows pages to adapt to different screen sizes using liquid layouts, scaling images, viewport meta tags, and media queries. Media queries allow applying styles based on device capabilities. CSS frameworks provide pre-built CSS classes and tools to make working with CSS easier. Popular frameworks include Bootstrap and Blueprint, which offer grid systems for multi-column layouts. CSS preprocessors allow variables, inheritance, and other programming techniques to be used with CSS.
![Media QueriesBrowser features you can Examine with Media Queries
Feature Description
width Width of the viewport
height Height of the viewport
device-width Width of the device
device-height Height of the device
orientation Whether the device is portrait or landscape
color The number of bits per color
[HP1]Au: Should these go in monospace font? HP](https://image.slidesharecdn.com/mediaqueriesandframeworks-150203092238-conversion-gate02/85/Media-queries-and-frameworks-12-320.jpg)
Media queries and frameworks
- 1. Advanced CSS: Media Queries, and Frameworks Chapter 5, Part 3
- 3. Responsive Design In a responsive design, the page “responds” to changes in the browser size that go beyond the width scaling of a liquid layout. One of the problems of a liquid layout is that images and horizontal navigation elements tend to take up a fixed size, and when the browser window shrinks to the size of a mobile browser, liquid layouts can become unusable. In a responsive layout, images will be scaled down and navigation elements will be replaced as the browser shrinks,
- 5. Responsive DesignExample There are four key components that make responsive design work. 1. Liquid layouts 2. Scaling images to the viewport size 3. Setting viewports via the <meta> tag 4. Customizing the CSS for different viewports using media queries
- 6. Responsive Design Responsive designs begin with a liquid layout, that is, one in which most elements have their widths specified as percentages. Making images scale in size is actually quite straightforward, in that you simply need to specify the following rule: img { max-width: 100%; } Liquid Layout
- 7. Responsive Design A key technique in creating responsive layouts makes use of the ability of current mobile browsers to shrink or grow the web page to fit the width of the screen. Setting Viewports
- 8. Responsive Design If the developer has created a responsive site that will scale to fit a smaller screen, she may not want the mobile browser to render it on the full-size viewport. The web page can tell the mobile browser the viewport size to use via the viewport <meta> element <html> <head> <meta name="viewport" content="width=device-width" /> Setting Viewports
- 10. Media Queries The other key component of responsive designs is CSS media queries. A media query is a way to apply style rules based on the medium that is displaying the file. You can use these queries to look at the capabilities of the device, and then define CSS rules to target that device.
- 11. Media Queries Contemporary responsive sites will typically provide CSS rules for phone displays first, then tablets, then desktop monitors, an approach called progressive enhancement, in which a design is adapted to progressively more advanced devices
- 12. Media QueriesBrowser features you can Examine with Media Queries Feature Description width Width of the viewport height Height of the viewport device-width Width of the device device-height Height of the device orientation Whether the device is portrait or landscape color The number of bits per color [HP1]Au: Should these go in monospace font? HP
- 13. Media QueriesMedia queries in action
- 14. CSS Frameworks A CSS framework is a precreated set of CSS classes or other software tools that make it easier to use and work with CSS. They are two main types of CSS framework: • Grid systems • CSS preprocessors. This is hard!
- 15. Grid Systems Grid systems make it easier to create multicolumn layouts. Some of the most popular are • Bootstrap (twitter.github.com/bootstrap) • Blueprint (www.blueprintcss.org) • 960 (960.gs) Print designers typically use grids as a way to achieve visual uniformity in a design. In print design, the very first thing a designer may do is to construct, for instance, a 5- or 7- or 12-column grid. The rest of the document, whether it be text or graphics, will be aligned and sized according to the grid Frameworks do the heavy lifting
- 16. Grid SystemsFrameworks do the heavy lifting
- 19. Example Pure Bootstrap Layouts
- 20. CSS Preprocessors CSS preprocessors are tools that allow the developer to write CSS that takes advantage of programming ideas such as variables, inheritance, calculations, and functions. Most sites make use of some type of color scheme, perhaps four or five colors. Many items will have the same color.
- 22. What you Learned Responsive Design6 7 7 CSS Frameworks