Write a breakpoints class in responsive web design with javascript
If you have to design a responsive design website(RWD), there is a easy class to judge with the various kinds of devices.
let breakPoints = {
points :{
phone: 320,
tablet: 768,
desktop: 1024,
},
isM: function () {
if (window.innerWidth < this.points.tablet) {
console.log("isMobile", window.innerWidth < this.points.tablet);
return window.innerWidth < this.points.tablet;
} else if ( window.innerWidth > this.points.phone && window.innerWidth < this.points.desktop) {
console.log("isTable");
} else if (window.innerWidth > this.points.desktop) {
console.log("isDesktop");
}
},
isT: function () {
if (window.innerWidth < this.points.tablet) {
console.log("isMobile", window.innerWidth < this.points.tablet);
} else if ( window.innerWidth > this.points.phone && window.innerWidth < this.points.desktop) {
console.log("isTable");
return (window.innerWidth > this.points.phone && window.innerWidth < this.points.desktop);
} else if (window.innerWidth > this.points.desktop) {
console.log("isDesktop");
}
},
isD:function () {
if (window.innerWidth < this.points.tablet) {
console.log("isMobile", window.innerWidth < this.points.tablet);
} else if ( window.innerWidth > this.points.phone && window.innerWidth < this.points.desktop) {
console.log("isTable");
} else if (window.innerWidth > this.points.desktop) {
console.log("isDesktop");
return (window.innerWidth > this.points.desktop);
}
} }