CODEWITHSUNDEEP
javascriptjqueryipadcssmobile-website
Mirza Talat
Mirza Talat

Reputation: 25

to make buttons resizable according to screen sizes using jquery/javascript

I want to make my button controls resizable according to the screen sizes, like they should adjust themselves on other mobile devices as well(iPhones and iPads) .How is it possible?

Upvotes: 0

Views: 167

Answers (4)

Martijn
Martijn

Reputation: 16123

Css3 has mediaqueries which allows you make screen specific styles. This is not very well supported in older IE's, that is why you always have to define an normal. The cascading effect stays in affect, you do not need to redefine properties from normal in the mediaqueries (for example, background will be green in all scenarios)

/*normal*/
button{
    width: 200px;
    background: green;
}

@media only screen and (max-width: 600px) {
    button{ 
        width: 150px;
    }
}
@media only screen and (max-width: 480px) {
    button{ 
        width: 100px;
    }
}

This is called responsive design, the design responds to the widths. IE will do nothing, but if you are using Firefox and make the width of the browser smaller, it will hop automatically to the media styles

Upvotes: 1

Prasanna Aarthi
Prasanna Aarthi

Reputation: 3453

You can make them resizable by setting their width in percentage, so that they would resize according to the screen size,

.buttonclass
{
width:80%;
}

This should work..

if you want to use pixels, then make use of media queries according to various screens you need to support,

@media screen and (max-width: 480px) and (min-width: 320px) {
.buttonclass{
width:300px;
}
}

Upvotes: 0

B Cotter
B Cotter

Reputation: 951

Use percentage based sizes on your elements so that they scale automatically, or use media queries for specific window sizes, and set your element sizes accordingly.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Upvotes: 0

Mostafa Elgaafary
Mostafa Elgaafary

Reputation: 1592

Well you gotta use media queries for that :

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Upvotes: 0

Related Questions