Solved

screen size CSS adaptation using mediaquery JQUERY or LESS CSS

Posted on 2014-02-01
4
660 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 108

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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Error installing extension Linux 4 27
Instering to MySQL table 5 16
CSS measurement 10 13
Tracking Bouncebacks in PHPMailer 2 0
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

707 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now