Skip to Content

Responsive design

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

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

2 Answers

  • Best Answer
    avatar image
    Former Member
    Oct 09, 2013 at 01:09 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Oct 09, 2013 at 10:42 AM

    Hi Jeroen,

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

    Add comment
    10|10000 characters needed characters exceeded