В этом примере, я покажу один из способов, с помощью которого можно изменять стилевое оформление сайта, в зависимости от разрешения экрана.
Мы не будем пользоваться скриптами, а будем использовать функциональные возможности самих браузеров.
Для этого в теге <head>, мы подключим разные стили, которые будут настроены на определенный диапазон разрешения экрана.
Пример:
|
1 2 3 4 5 |
<link media="screen and (max-width: 500px)" type="text/css" rel="stylesheet" href="css/res_300.css" /> <link media="screen and (min-width: 500px) and (max-width: 1024px)" type="text/css" rel="stylesheet" href="css/res_500.css" /> <link media="screen and (min-width: 1024px)" type="text/css" rel="stylesheet" href="css/res_1024.css" /> |
