What is the best practice for dynamic CSS (lessCSS)

[webtecgeek]

Hi,

Here I gave some code I did that is running BUT I imaginated it and I believe this solution is not very practical to use.

MY PURPOSE IS TO GENERATE DYNAMIC CSS.

I have used media query in the begining but I cannont size for every screen so many they become now a days.

` @media screen and (max-width: 485px) { body { text-align:center; font:0.9em “trebuchet ms”, helvetica, arial, sans-serif; background-color:blue; word-wrap: break-word; }

.mytable { width:400px; }

}`

so I created a JQUERY script to detect the size odf the screen and change CSS properties `$(document).ready( function() { var str=parseInt($(window).width())-parseInt(100); $(“.mytable”).css(“width”, str ); });

    $( window ).resize(function() {
    var str=parseInt($(window).width())-parseInt(100);
    $(".mytable").css("width", str );
    });`

Personnaly I doubt this solution is the best one and I have a lot of CSS in my website that insist on picture digital art sizing I imagine not so much to encode dynamic JQUERY CSS for every element.

I have heard of less-css a little but haven’t managed to make it work.

Can some one tell me the best practice and were I can find links that are OK to implement a solution not too much difficult ( ex php not python and yalm…)

Thanks a lot Best reagards

David `

<title>HOW to do CSS adapting to smartphone browser ...</title>

table,td,th { border:1px solid black; } td { text-align:right; }

@media screen and (max-width: 485px) { body { text-align:center; font:0.9em “trebuchet ms”, helvetica, arial, sans-serif; background-color:blue; word-wrap: break-word; }

.mytable { width:400px; }

}

@media screen and (min-width: 485px) and (max-width: 1100px) { body { text-align:center; font:0.9em “trebuchet ms”, helvetica, arial, sans-serif; background-color:red; word-wrap: break-word; }

.mytable { width:500px; }

}

@media screen and (min-width: 1100px) { body { text-align:center; font:0.9em “trebuchet ms”, helvetica, arial, sans-serif; background-color:green; word-wrap: break-word; }

.mytable { width:1000px; }

}

.th1 { width:20%; } .th2 { width:50%; } .th3 { width:30%; }

my message:

Firstname Lastname Savings Peter Griffin $100 Lois Griffin $150 Joe Swanson $300 Cleveland Brown $250

<script>
  $(function() {

    $(document).ready( function() {
    var str=parseInt($(window).width())-parseInt(100);
    $(".mytable").css("width", str );
    });

    $( window ).resize(function() {
    var str=parseInt($(window).width())-parseInt(100);
    $(".mytable").css("width", str );
    });



    });

</script>

`

[Author]

Posts