Embed Size (px)
DESCRIPTION
Responsive web, Get start responsive, trend web design
Citation preview
LAB#13 Responsive Web DesignBy Yaowaluck Promdee, Sumonta Kasemvilas 322432 Web Design Technology
What is “Responsive Web Design” ?
Getting Started
1. Add a viewport
2. Apply simple styling
3. Set your first breakpoint
4. Constrain the maximum width of the design
5. Alter the padding and reduce text size
6. Adapt elements to wide viewport
7. Wrapping up
https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive?hl=en
Content and structure Final Site
Add a viewport
<meta name content="width=device-width, initial-scale=1">
Using the meta viewport value width=device-width instructs
the page to match the screen’s width in device independent
pixels. This allows the page to reflow content to match
different screen sizes, whether rendered on a small mobile phone or a large desktop monitor.
Apply simple styling
Constrain the maximum width of the design
Adjusting Screen Resolution
This shows the the most significant screen sizes, from the smallest to the largest.
Example
http://learn.shayhowe.com/advanced-html-css/responsive-web-design
Relative Fluid Layouts (%)
Set your first breakpoint
Meta Viewport
@media (query) {
/* CSS Rules used when query matches */
}
Apply media queries based on viewport size
@media screen and (min-width: 800px) and (max-width:
1200px) { .test { font-size: 14pt; } }
http://www.designil.com/what-is-responsive-web-design-1.html
Example
attribute Result
min-widthRules applied for any browser width over the value defined in the
query.
max-widthRules applied for any browser width below the value defined in the
query.
min-heightRules applied for any browser height over the value defined in the
query.
max-heightRules applied for any browser height below the value defined in the
query.
orientation=portraitRules applied for any browser where the height is greater than or
equal to the width.
orientation=landscape Rules for any browser where the width is greater than the height.
Media queries
Create a Web page to present
“Search Engine Optimization”
from information provided using HTML5 and
CSS can be Responsive on mobile screen
In hours time
Assignment#13
