Write a breakpoints class in responsive web design with javascript

York Chen
1 min readMar 23, 2021

--

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);
}
}
}

--

--

York Chen
York Chen

Written by York Chen

Cooking is an indispensable part of life. It is a taste that can’t be forgotten.

No responses yet