You can use css media screen query for your application. Then you will be able to change the implementation of same css class for different screen size.
Example:
HTML:
<div class="style1">
Hi, this is a test.
</div>
CSS:
.style1
{
border: 4px solid green;
width:100%
}
@media screen and (max-width: 680px) {
.style1
{
border: 4px solid gray;
}
}
@media screen and (max-width: 400px) {
.style1
{
border: 4px solid blue;
}
}
Here you see 1st css class is a general one (outside of media screen blocks). And other 2 classes are under different media size. you see I have mentioned "max-width" for each media screen block. That means if screen size is <=400px then it will use the css class from 1st media screen block, but if screen size is > 400px and <=680px then it will use the css class from 2nd media screen block.