Use of Media Queries for Standard Devices

CSS3 provides a way to make CSS conditional to write the CSS as per device resolution.

See following HTML5 compatible CSS to design your mobile websites for various standard devices. It includes iPhone, iPad, smart phones etc…


/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Reference URL

Advertisements

HTML5 Canvas – Nice flame/fire effect using particles

Try following HTML script. Shows nice flaming/fire effect using Javascript and CSS.

Javscript:
window.onload = function(){
var canvas = document.getElementById(“canvas”);
var ctx = canvas.getContext(“2d”);

//Make the canvas occupy the full page
var W = window.innerWidth, H = window.innerHeight;
canvas.width = W;
canvas.height = H;

var particles = [];
var mouse = {};

//Lets create some particles now
var particle_count = 100;
for(var i = 0; i < particle_count; i++)
{
particles.push(new particle());
}

//finally some mouse tracking
canvas.addEventListener(‘mousemove’, track_mouse, false);

Continue reading