Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

screen size CSS adaptation using mediaquery JQUERY or LESS CSS

Posted on 2014-02-01
4
668 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 34

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

Question has a verified solution.

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

Suggested Solutions

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to dynamically set the form action using jQuery.

790 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