How to be compatible with different resolutions in HTML / CSS? -
there several different monitor types, therefore webpage need compatible lot of different screen resolutions. use 4k monitors nowadays of background images still "only" hd. not problem facing. important is, how know resolution of used monitor is, using html or css? if set hd background page , uses 4k monitor open site, he/she see background's bottom , therefore empty part of webpage under background image, not nice. possible solutions problem?
i think you're looking achievable through css, via media queries. allows style html different screen resolutions. syntax easy understand too.
one of ways use these media queries within css file. here's example below.
/*this screen types guess*/ body{ background-image: url('img/large-background.jgp'); /*this target screens max width of 768px i.e. tablets*/ @media (max-width: 768px) { body { background: url('img/less-large-background-for-devices.jpg'); } }
also @ these docs, comprehensive , easy understand. give more details , other ways of targeting different screens using css.
Comments
Post a Comment