-1

If I hava all my font sizes in ems, and then use javascript to change the css rule determining font-size of the body (which will be in px) surely this will result in text that grows with a widening, percentage-based grid?

Apparently, changing css rules is tricky and doesn't support legacy versions of some browsers (guess which one), but if I embed my body rules right on the page, will that make things cross compliant?

Starkers
  • 10,273
  • 21
  • 95
  • 158
  • Definitely you [can change a CSS rule](http://stackoverflow.com/a/17454470/1169519) also in those anonymous "legacy browsers". – Teemu Jul 26 '13 at 10:06
  • 1
    You could use some kind of finished [media query library](https://code.google.com/p/css3-mediaqueries-js/) for earlier browsers. Still uses Javascript, but saves you the hassle of writing/testing it yourself. – Joachim Isaksson Jul 26 '13 at 10:08
  • ypu can use the font-size in em like font-size:1em or in % like font-size:5% – Vikas Gautam Jul 26 '13 at 10:12

1 Answers1

1

you can use the font-size in em like font-size:1em or in % like font-size:5%

try to put the css in 

 @media screen and (min-width: 768px) and (max-width: 800px) 
{  css   }

according to device width like ipad and for the iphone you can change that 

@media screen and (min-width: 320px) and (max-width: 480px) 
{   here is css  }

so that you able to see your design perfectly st these resolution

Vikas Gautam
  • 997
  • 7
  • 23
  • 1
    Just to add some explanation to the answer, by setting your font to 1em you set it to the default size of the user's system, one of the downsides is if the user has his set to a high value due to being visually impaired. – Patsy Issa Jul 26 '13 at 10:15
  • Looks like OP is concerning about legacy browsers too, media queries are not supported in older IEs. – Teemu Jul 26 '13 at 10:39
  • i am useing and working well in all browsers which version you are useing @Teemu – Vikas Gautam Jul 26 '13 at 10:42
  • Several versions and browsers when I'm testing some code, and especially when I'm creating cross-browser code ; ). Anyway, [Media Queries](http://msdn.microsoft.com/en-us/library/ie/hh772370%28v=vs.85%29.aspx) was introduced in version 9 in IE. – Teemu Jul 26 '13 at 10:46
  • its also working fine in ie8 here and its for the mobile devices like i pad and ihone and the browser our normal css will work fine @Teemu – Vikas Gautam Jul 26 '13 at 10:49
  • Where it's working, probably a missing link in your comment? Please don't trust emulation modes in IE9+, when testing code for older IEs, they are not accurate enough... – Teemu Jul 26 '13 at 10:51
  • ok i will study deeply on this i think you have lot of knowlege and experince thanks@teemu – Vikas Gautam Jul 26 '13 at 10:53