introduction to responsive web design
DESCRIPTION
TRANSCRIPT
22-3376 Web Design 2 // Columbia College Chicago
RESPONSIVE / BOOTSTRAP
What is Responsive Web Design?
Responsive web design (RWD) is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it
<head>! <link rel="stylesheet" type="text/css" href="stylesheet.css">! <link rel="stylesheet" type="text/css" href="print.css" media="print">!</head>
The media attribute specifies what media/device the target resource is optimized for. The most common usage is for overriding styles for printing.
Media Types
@media print {! p {font-size: 20px;! color: red;! }!}
The @media rule allows different style rules for different media in the same style sheet.
Media Types
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen). !
A media query consists of a media type and one or more expressions, involving media features, which resolve to either true or false.
Media Queries
http://www.w3.org/TR/css3-mediaqueries/
Media Queries
@media print {! p {font-size: 20px;! color: red;! }!}
<meta name=“viewport” content=“width=device-width, initial-scale=1.0>
Many small devices will automatically scale up or down your website to around 960px. This header tag tells the browser to scale the content to the actual window size of the device.
Viewport
Breakpoints
A simple version from the framework ‘Base’:
@media only screen and (min-width: 740px) and (max-width: 959px) { }
@media only screen and (max-width: 739px) { }
Breakpoints
http://matthewhartman.github.io/base/
@media only screen and (min-width: 740px) and (max-width: 959px) { !
When viewed on a screen
AND
Minimum width of screen is at least 740px but not more than 959px
!
Breakpoints
Breakpoints
@media only screen and (min-width: 740px) and (max-width: 959px) {}
@media only screen and (max-width: 739px) {}
(default)
Tutorial !
1 Responsive Test
What is Mobile First?
What is Mobile First? !
It Mobile up,not Desktop down.
Mobile-first approach from Bootstrap 3.0:
@media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { } !
Breakpoints (Mobile-First)
http://getbootstrap.com/
Breakpoints: Mobile First (Bootstrap)
@media (min-width: 768px) @media (min-width: 998px) @media (min-width: 1200px)(default)
Tutorial !
2 Bootstrap Simple
Tutorial !
3 Bootstrap Nav