Solved

screen size CSS adaptation using mediaquery JQUERY or LESS CSS

Posted on 2014-02-01
4
695 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
[X]
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
4 Comments
 
LVL 110

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

Interactive Way of Training for the AWS CSA Exam

An interactive way of learning that will help you visualize core concepts so that you can be more effective when taking your AWS certification exam.  Built for students by a student to help them understand the concepts that they are being taught.

Question has a verified solution.

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

These days socially coordinated efforts have turned into a critical requirement for enterprises.
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

630 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