how to create a function that work in specific width in CSS [closed]-CodePudding

is it possible to create a function in javascript or jquery that work in specific width in CSS like I want to create a button that alert("hello world") but this will work only on mobile screen in other media queries will do nothing

CodePudding user response：

I don't think it's possible, You can use the following code to get the width:

// Size of browser viewport.
$(window).width();

// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).width();

so if you want to apply on mobile, you can add a condition

if ($(window).width() <= 425) {
   // Do something
   alert("hello world")
}

CodePudding user response：

if ($(window).width() < 768){
  // do something
}

if using jquery

CodePudding user response：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    if ($(window).width() <= 575) {
        alert("hello world")
        }
});
</script>
</head>
<body>

</body>
</html>