Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 708
  • Last Modified:

screen size CSS adaptation using mediaquery JQUERY or 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.

@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;
}

}

Open in new window




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 );
		});

Open in new window


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 http://thecacaocafe.com
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


<!DOCTYPE html>
<html>
  <head>

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

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

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

<style type="text/css">



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%;
}

</style>


 
 </head>
  <body>
<span id="msg">my message: </span>
 
 
 <div id="mytable">
<table class="mytable">
<tr>
<th class="th1">Firstname</th>
<th class="th2">Lastname</th>
<th class="th3">Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
 </div>
    <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>
  </body>
</html>

Open in new window

0
DavidInLove
Asked:
DavidInLove
3 Solutions
 
Ray PaseurCommented:
Consider Twitter Bootstrap for responsive design.
http://getbootstrap.com/getting-started/
0
 
Slick812Commented:
greetings  DavidInLove, , With CSS you can supply a width as a percent of it's containers width such as

.mytable
{
width: 56.8%;
}

and for ALL sizes and resizes the mytable will be 56.8 percent of the width of the <body> (it's container) . . .  you will not need any    @media screen    or   javascript
However this can have results that are too small and too large, so what I do is add CSS  min-with:   and    max-width:

maybe like -
.mytable
{
width: 56.8%;
max-width: 1000px;
min-width: 310px;
}

so the mytable will  resize and never get below 310px  or above  1000px  without any CSS media or javascript, , if you look up and experiment with things for CSS , you can find other very usefull stuff, , , ask questions if you need more info.
0
 
COBOLdinosaurCommented:
While using percentages for widths is adaptive, it is not fully responsive as it may warp the inter-element relationships.

For a responsive design you can use the viewport relative units of measure (vw and vh), and where some actual tweaking is necessary you can eliminate the need for scripting most of the time by using the CSS calc() function with mixed unit operaands.

I explore the basics of calc() and vieport relative units on my personal site.

Cd&
0
 
DavidInLoveAuthor Commented:
Thank you every one of you for different kind of solution.
I use BOOTSTRAP (I've downloaded the code and use the span I will now try to understand it)
second solution is pleasant I can apply the % and min and max width straight away!
For COBOLdinosaur I've registered to your site and found this
http://coboldinosaur.com/pages/css-calc-function.html

I will seriously now investigate on CSS.
Maybe I will ask some more POST on those subjects.


Thanks a lot.
David
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now