Topic #1: HTML Responsive Web Design
Responsive web design is about creating web pages that look good on all devices
Responsive web designs adjust to sit all screen sizes (iphone, laptop, ipad)
Adding a /meta/ tag will help create a responsive web design
/meta name="viewport" content="width=device-width, initial-scale=1.0"/
This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling.
Responsive Images
Responsive images are images that scale nicely to fit any browser size
width property- is scaled to 100%, the image will be responsive and scale up and down
/img src="img_girl.jpg" style="width:100%;"/
max-width property- is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size
/img src="img_girl.jpg" style="max-width:100%;height:auto;"/
Show Different Images Depending on Browser Width
The HTML /picture/ element allows you to define different images for different browser window sizes.
/picture/
/source srcset="img_smallflower.jpg" media="(max-width: 600px)"/
/source srcset="img_flowers.jpg" media="(max-width: 1500px)"/
/source srcset="flowers.jpg"/
/img src="img_smallflower.jpg" alt="Flowers"/
//picture/
Responsive Text sizes
The text size can be set with a "vw" unit, which means the "viewport width".
/h1 style="font-size:10vw"/Hello World//h1/
Topic #2: Media Queries
In addition to resize text and images, it is also common to use media queries in responsive web pages.
With media queries you can define completely different styles for different browser sizes.
/style/
.left, .right {
float: left;
width: 20%; /* The width is 20%, by default */
}
.main /
float: left;
width: 60%; /* The width is 60%, by default */
/
/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%;
/* The width is 100%, when the viewport is 800px or smaller */
Responsive Web Page - Full Example on WW3.com
A responsive web page should look good on large desktop screens and on small mobile phones.
Frameworks available
W3.CSS-W3.CSS is a modern CSS framework with support for desktop, tablet, and mobile design by default. W3.CSS is smaller and faster than similar CSS frameworks. W3.CSS is designed to be independent of jQuery or any other JavaScript library.
Full Example pending
Topic #3: CSS Media Queries
The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.Media queries in CSS3 extended the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.
Media queries can be used to check many things, such as:
width and height of the viewport
orientation of the viewport (landscape or portrait)
Resolution
Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).
CSS Media Types
All-Used for all media type devices
Print-Used for print preview mode
Screen-Used for computer screens, tablets, smartphones ect.
CSS common media features
Orientation-Of viewpoint- landscape or portrait
Max-height-Max. height of viewpoint
Min-height-Min height of viewpoint
Height-Height of viewpoint (including scrollbar)
Max-width-Max. width of the viewpoint
Min-width-Min. width of the viewpoint
Width- Width of viewpoint (including scrollbar)