html - media query device width or resolution -


i have problem media queries.

i targeting (to start with) max-device-width of 1024px 1 stylesheet, , min-device-width of 1025px another, using percentages content adapts browser resizing.

however, large 20inc screen uses same stylesheet 11.6inch screen, assume due resolution old computer 15inch screen uses other, smaller stylesheet?

because usingpercentages main content area, area appears fine on large screen don't want content spread on whoe 20inch screen, on small 11.6inch screen looks tiny.

what doing wrong? there best practice targeting devices , using percentages viable option? way content adapts browser resizing bit bit.

i understand decent amount how media wueries work, love have method use sites, using device-width, width or resolution etc, @ minute find need keep adding stylesheets.

thanks in advance

it 11.6 inch screen has high pixel density screen (hidpi). give resolution equal 20 inch screen. have same style (max-device-width/min-device-width) try targeting devices in terms of dpi, or pixel-ratios. see guide more (https://developer.mozilla.org/en-us/docs/web/guide/css/media_queries).

also may need add viewport adjust text size. well-recommened statement <head> tag (http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972):

<meta name="viewport" content="width=device-width, initial-scale=1"> 

Comments

Popular posts from this blog

PHPMotion implementation - URL based videos (Hosted on separate location) -

c# - Unity IoC Lifetime per HttpRequest for UserStore -

I am trying to solve the error message 'incompatible ranks 0 and 1 in assignment' in a fortran 95 program. -