» » Смена стилей в зависимости от размера екрана
12 0  

Смена стилей в зависимости от размера екрана

Сейчас без респонсивной верстки которая должна подстраиватся под разные экраны, включая мобильные никак не обойтись.
Расмотрим все варианты - как можно сменить вид сайта в зависимости от размера устройства на котором он просматрывается.

1. Через медиа запросы. Самый популярный вариант.

1.1 Для каждого экрана добавляем свои файлы стилей:

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">

Больше информации о media здесь


1.2 Для каждого екрана вносим правки водном файле стилей:

/* При максимальной ширине екрана */
@media (max-width: 900px) {
  .hed-zag h2 {display:none;}
}

/* При просмотре на любых екранах и для печати */
@media screen, print  (min-width: 900px) {
  article {padding: 1rem 3rem;}
}

Больше здесь - смотреть


2 вариант. Через скрипт меняем название файла со стилями.

function  changeCss() {
   var w =  screen.width;
   var h =  screen.height;
   if (w <=  '1024' && h <= '768')
       {  document.getElementById("stylesheet").href="css/style_1024х768.css";
                }
            else
                  { if (w == '1152' && h ==  '864')
                  {document.getElementById("stylesheet").href="css/style_1152х864.css";}
                  else
                      { if (w == '1280'  && h == '800')
                      {document.getElementById("stylesheet").href="css/style_1280х800.css";}
                  else
                      { if (w >= '1280' && h >=  '1024')
                      {document.getElementById("stylesheet").href="css/style_1024х1024.css";}
                  };  };
                };
           }; 

* Этот скрипт должен стоять в head:

<script  type="text/jаvascript"  src="jаvascript.js"></script>
<script  type="text/jаvascript">window.onload  = changeCss;</script>
<link rel="stylesheet" href="css/style.css"  type="text/css" id="stylesheet" media="screen"  />
</head>




И не забываем ставить запрет на маштабирование в мобильных устройствах:

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





Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019