cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Responsive design

Go to solution
jeroenvandera
Contributor

on ‎10-09-2013 8:10 AM

0 Kudos

Hi All,

i'm trying to set up a CSS where the font size etc is also changed based on the device you're running. To be able to do that i need to determine the

screensize. Is there a way to determine the screensize at runtime so that i can run a script at application on startup() where i set the CSS classes based on the screensize? I've experimented with .getwidth and getheight , but these won't work when the setting is auto.

Also working with the custom css i was not able to apply the solutions that CSS designers use.

regards,

Jeroen

Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
‎10-09-2013 2:09 PM
0 Kudos

Hi Jeroen,

By using media queries (w3.org) / media queries (developer.mozilla.org) presentations can be tailored to a specific range of output devices without changing the content itself.

Solution without JavaScript and without Design Studio scripting methods - example html without explanation:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
@media screen and (max-device-width : 1920px){ .txt1 {font-size: 18px;} }
@media screen and (max-device-width : 1600px){ .txt1 {font-size: 16px;} }
@media screen and (max-device-width : 1440px){ .txt1 {font-size: 14px;} }
@media screen and (max-device-width : 1280px){ .txt1 {font-size: 12px;} }
.fs12 {font-size: 12px;}
.fs14 {font-size: 14px;}
.fs16 {font-size: 16px;}
.fs18 {font-size: 18px;}
</style>
<title>Font Size Test</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    alert( "font-size: " + $('.txt1').css("font-size") );
});
</script>
</head>
<body>
<div class="txt1">
  <span>??px Sample Text</span>
</div>
<p></p>
<div class="fs12"><span>12px Sample Text</span></div>
<div class="fs14"><span>14px Sample Text</span></div>
<div class="fs16"><span>16px Sample Text</span></div>
<div class="fs18"><span>18px Sample Text</span></div>
</body>
</html>

You would want to adjust and include the lines 7-10 into your Design Studio custom css file.

Kind regards,

David

Show replies
Show replies
jeroenvandera
Contributor
‎10-10-2013 10:08 PM
0 Kudos

thanks David,

thought i did the same thing, but probably messed up the syntax somewhere, with your help it worked perfectly.

kind regards,

Jeroen

Answers (1)

Answers (1)

Former Member
‎10-09-2013 11:42 AM
0 Kudos

Hi Jeroen,

This CSS font depend upon the array size joins ( left, right joins)  in  Css report ! .

Show replies
Show replies
Ask a Question