How to get css mediaquery breakpoint using javascript.
responsivecss
tomoyukikashiro
Motivation
It is waste of time to fix the value of breakpoint for responsive design if you have that value in css and javascript.
In the following case you have to fix both 400
and 400px
.
ccs
@media screen and (min-width: 400px){
body:after{
content: 'desktop';
display: none;
}
}
Javascript
// ....
// ....
var minWidth = 400;
function isSp(){
return !(minWidth < window.innerWidth);
}
window.getComputedStyle
using css
@media screen and (min-width: 400px){
body:after{
content: 'desktop';
display: none;
}
}
javascript
// desktop or ''
var deviceWidth = window.getComputedStyle(document.body,':after').getPropertyValue('content');
function isSp(){
return deviceWidth !== 'desktop';
}