What is the best practice for dynamic CSS sizing according screen do you have information on less-CSS

What is the best practice for dynamic CSS sizing according screen do you have information on less-CSS

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.



  3. @media screen and (max-width: 485px) {
  4.  body {
  5. text-align:center;
  6. font:0.9em "trebuchet ms", helvetica, arial, sans-serif;
  7. background-color:blue;
  8. word-wrap: break-word;
  9. } 

  11. .mytable
  12. {
  13. width:400px;
  14. }

  16. }

so I created a JQUERY script to detect the size odf the screen and change CSS properties

  2. $(document).ready( function() {
  3. var str=parseInt($(window).width())-parseInt(100);
  4. $(".mytable").css("width", str );
  5. });
  7. $( window ).resize(function() {
  8. var str=parseInt($(window).width())-parseInt(100);
  9. $(".mytable").css("width", str );
  10. });

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

  2. <!DOCTYPE html>
  3. <html>
  4.   <head>

  6.     <title>HOW to do CSS adapting to smartphone browser ...</title>
  7.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  9. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

  11. <!--Problem should adapt dynamically so I use a solution with JQUERY -->

  13. <style type="text/css">



  17. table,td,th
  18. {
  19. border:1px solid black;
  20. }
  21. td
  22. {
  23. text-align:right;
  24. }


  27. @media screen and (max-width: 485px) {
  28.  body {
  29. text-align:center;
  30. font:0.9em "trebuchet ms", helvetica, arial, sans-serif;
  31. background-color:blue;
  32. word-wrap: break-word;
  33. } 


  36. .mytable
  37. {
  38. width:400px;
  39. }


  42. }

  44. @media screen and (min-width: 485px) and (max-width: 1100px) {
  45.  body {
  46. text-align:center;
  47. font:0.9em "trebuchet ms", helvetica, arial, sans-serif;
  48. background-color:red;
  49. word-wrap: break-word;
  50. } 


  53. .mytable
  54. {
  55. width:500px;
  56. }


  59. }



  63. @media screen and (min-width: 1100px) {
  64.  body {
  65. text-align:center;
  66. font:0.9em "trebuchet ms", helvetica, arial, sans-serif;
  67. background-color:green;
  68. word-wrap: break-word;
  69. } 


  72. .mytable
  73. {
  74. width:1000px;
  75. }


  78. }


  81. .th1
  82. {
  83. width:20%;
  84. }
  85. .th2
  86. {
  87. width:50%;
  88. }
  89. .th3
  90. {
  91. width:30%;
  92. }

  94. </style>


  97.  
  98.  </head>
  99.   <body>
  100. <span id="msg">my message: </span>
  101.  
  102.  
  103.  <div id="mytable">
  104. <table class="mytable">
  105. <tr>
  106. <th class="th1">Firstname</th>
  107. <th class="th2">Lastname</th>
  108. <th class="th3">Savings</th>
  109. </tr>
  110. <tr>
  111. <td>Peter</td>
  112. <td>Griffin</td>
  113. <td>$100</td>
  114. </tr>
  115. <tr>
  116. <td>Lois</td>
  117. <td>Griffin</td>
  118. <td>$150</td>
  119. </tr>
  120. <tr>
  121. <td>Joe</td>
  122. <td>Swanson</td>
  123. <td>$300</td>
  124. </tr>
  125. <tr>
  126. <td>Cleveland</td>
  127. <td>Brown</td>
  128. <td>$250</td>
  129. </tr>
  130. </table>
  131.  </div>
  132.     <script>
  133.       $(function() {
  135. $(document).ready( function() {
  136. var str=parseInt($(window).width())-parseInt(100);
  137. $(".mytable").css("width", str );
  138. });
  140. $( window ).resize(function() {
  141. var str=parseInt($(window).width())-parseInt(100);
  142. $(".mytable").css("width", str );
  143. });



  147. });
  148.     
  149.     </script>
  150.   </body>
  151. </html>

David  ( @webtecgeek   www.thecacaocafe.com )