Проходят те времена, когда все кинулись делать к каждому сайту приложение. В самом деле тупо надеяться, что клиент, чтобы только глянуть ваши товары и купить себе табуретку бросится скачивать приложение. Скорее всего он просто зайдет на ваш сайт с телефона. Вот тут и нужна адаптивная верстка.
Я лично использую сетку Bootsrap. В большинстве случаев выручает. Но не всегда.
Вообще адаптивности обычно добиваются через CSS. И реже через JS. И совсем уж редко на PHP. Я умудрился все три использовать.
Пример для мобильника(разрешение < 768)).
@media (max-width: 768px){
.mrgLR5_768{
margin: 0 5px !important;
}
.mrgT10_768{
margin-top: 10px !important;
}
.mrgT20_768{
margin-top: 20px !important;
}
.mrgB10_768{
margin-bottom: 10px !important;
}
.mrgB20_768{
margin-bottom: 20px !important;
}
}
Для десктопа будет примерно так(разрешение больше 768):
@media (min-width: 768px){
.dispTC_gt_768{
display: table-cell;
}
}
В случаях когда уже не хватает только изменения свойств, и нужно передвинуть блок в другой блок, или скопировать его и т.д. - выходит на арену JS. Вот так можно "схлопнуть" блок bootstrap при загрузке страницы на мобильник.
<script type="text/javascript">
$(document).ready(function(){
var $win=$(window);
var winW=$win.width();
var winH=$win.height();
if(winW<768){
$("#popKat").collapse();
}
});
</script>
Особенно полезен JS при боковых(левых и правых) вертикальных меню с разделами и подразделами. Подраздел можно просто "отвязать" от прежнего родителя, перенести в верх среднего блока, сделать автономный выплывающий блок и т.д.. Т.е. полная свобода.
Это вообще круто! Когда не нужна индексация. Например блоки типа "последние просмотренные", "мы также рекомендуем", "с этим товаром покупают" и т.п.. Смысл:
<?php
$curId = $modx->documentIdentifier;
$curId=($curId==9481) ? 116 : $curId;
?>
<script type="text/javascript">
$(document).ready(function(){
var docId=<?php echo $curId;?>;
var $win=$(window);
var winW=$win.width();
var winH=$win.height();
$("#pohogieAj").load(
"/assets/..../aj/ogiemain.php",
{
docId: docId,
param2: 2,
winW:winW,
winH:winH
},
function(data){
$(shkOptions.stuffCont).shopkeeper();
}
);
});
</script>
<hr>
<h3 class="text-primary">Похожие товары :</h3>
<div id="carousel-pohogee" class="carousel slide" data-ride="carousel">
<?php
$MngrDir=$_SERVER['DOCUMENT_ROOT'].'/manager';
define('MODX_MANAGER_PATH', $MngrDir."/");
require_once(MODX_MANAGER_PATH . 'includes/config.inc.php');
require_once(MODX_MANAGER_PATH . 'includes/protect.inc.php');
define('MODX_API_MODE', true);
require_once(MODX_MANAGER_PATH.'/includes/document.parser.class.inc.php');
session_name($site_sessionname);
session_id($_COOKIE[session_name()]);
session_start();
$modx = new DocumentParser;
$modx->minParserPasses=2;
$modx->db->connect();
$modx->getSettings();
$modx->config['site_url'] = isset($request['site_url']) ? $request['site_url'] : '';
$arrDoc=$modx->getDocument($_POST['docId']);
$priceTV=$modx->getTemplateVar("price","*",$_POST['docId']);
$price=$priceTV['value'];
$curPrice = ($price> 0) ? $price : 0;
$curParent = $arrDoc['parent'];
$curParent =($curParent==9294) ? 122 : $curParent;
$items = null;
$idsArr=array();
$sql= "SELECT `tvc`.`contentid`, `tvc`.`value`
FROM `modx_site_tmplvar_contentvalues` AS tvc
LEFT JOIN `modx_site_content` AS cnt ON ( `tvc`.`contentid` = `cnt`.`id` )
WHERE `cnt`.`parent` = '".$curParent."'
AND `tvc`.`value` < ".$curPrice."
AND `tvc`.`tmplvarid` = '4'
AND `cnt`.`published` = '1'
ORDER BY `tvc`.`value` ASC
LIMIT 3";
$res = $modx->db->query($sql);
while ($row = $modx->db->getRow($res)) {
$idsArr[] = $row['contentid'];
}
$limit=6-count($idsArr);
$sql="SELECT `tvc`.`contentid`, `tvc`.`value`
FROM `modx_site_tmplvar_contentvalues` AS tvc
LEFT JOIN `modx_site_content` AS cnt ON ( `tvc`.`contentid` = `cnt`.`id` )
WHERE `cnt`.`parent` = '".$curParent."'
AND `tvc`.`value` > ".$curPrice."
AND `tvc`.`tmplvarid` = '4'
AND `cnt`.`published` = '1'
ORDER BY `tvc`.`value` ASC
LIMIT ".$limit."
";
$res = $modx->db->query($sql);
while ($row = $modx->db->getRow($res)) {
$idsArr[] = $row['contentid'];
}
$items="";
if (count($idsArr) == 0) {echo ''; return;}
$idsMore = implode(',', $idsArr);
$total=count($idsArr);
$parents=''.$curParent;
$tpl=file_get_contents($_SERVER['DOCUMENT_ROOT'].'/assets/cppv/TPL/T1/BODY/MiddleTovar/pohogie/ditto1.tpl');
$tpl350=file_get_contents($_SERVER['DOCUMENT_ROOT'].'/assets/cppv/TPL/T1/BODY/MiddleTovar/pohogie/ditto350.tpl');
$winW=(int)$_POST['winW'];
$winH=(int)$_POST['winH'];
$outCarItems="";
$countItems=2;
if($winW<800){$countItems=3;}
if($winW<768){$countItems=6;}
if($winW<350) {
$tpl=$tpl350;
}
$sizeItems=ceil(count($idsArr)/$countItems);
$carentSize=0;
$outCarItems.='<div class="carousel-inner text-center">'."\n";
$outCarItems.='<div class="item active dispT">'."\n";
foreach($idsArr as $v){ $carentSize++;
$arr=$modx->getDocument($v);
$TVs=$modx->getTemplateVars(array('price','catalog_item_image'),"*",$v);
$arr["price"]=$TVs[0]["value"];
$arr["catalog_item_image"]=$TVs[1]["value"];
$arr["url"]= $modx->makeUrl($arr['id'],'','','full');
$modx->placeholders=$arr;
if($carentSize>$sizeItems) {
$outCarItems.='
</div>
<div class="item dispT">
';
$carentSize=1;
}
if($carentSize<$sizeItems) {
$outCarItems.='<div class="I dispTC pdngR10">'."\n";
}else {
$outCarItems.='<div class="I dispTC">'."\n";
}
$outCarItems.=$modx->parseDocumentSource($tpl).'</div>';
}
$outCarItems.='</div>';
$outCarItems.='</div>';
$outCarIndicators='
<ol class="carousel-indicators">
<li data-target="#carousel-pohogee" data-slide-to="0" class="active"></li>
<li data-target="#carousel-pohogee" data-slide-to="1"></li>
</ol>
';
$outCarControl='
<a class="left carousel-control" href="#carousel-pohogee" data-slide="prev">
<span class="fs22 glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-pohogee" data-slide="next">
<span class="fs22 glyphicon glyphicon-chevron-right"></span>
</a>';
echo $out.$outCarItems.$outCarControl;
?>
</div>
Да, адаптация добавила некоторую сложность в жизнь верстальщиков и программистов. Приходится приспосабливаться. И с этим уже ничего не поделаешь).
Комментарии 0