Solved

screen size CSS adaptation using mediaquery JQUERY or LESS CSS

Posted on 2014-02-01
4
666 Views
Last Modified: 2014-02-02
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
Comment
Question by:DavidInLove
4 Comments
 
LVL 109

Assisted Solution

by:Ray Paseur
Ray Paseur earned 125 total points
ID: 39826916
Consider Twitter Bootstrap for responsive design.
http://getbootstrap.com/getting-started/
0
 
LVL 33

Assisted Solution

by:Slick812
Slick812 earned 125 total points
ID: 39827181
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
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 250 total points
ID: 39827727
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
 

Author Closing Comment

by:DavidInLove
ID: 39827916
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question