Mobile-friendly — немного об адаптивной верстке

Mobile-friendly — немного об адаптивной верстке


В эпоху mobile-friendly сайтов адаптивная верстка для сайта стала обыденностью и по умолчанию включается в базовый ценник (или же делают большие скидки) сайта многими дизайн студиями, например, студия Нужен сайт в Барнауле. Такая верстка позволяет контролируемо изменить дизайн в сторону комфорта его просмотра с небольших экранов.

Основной упор делается на контент и увеличение скорости загрузки с мобильного интернета. Это и смещение менее важных элементов дизайна в нижнюю часть сайта, и выключение нагруженных скриптов, рекламных блоков и прочих не нужных элементов на экране телефона.

Как и в десктопной версии, адаптивная верстка сайта подразумевает собой отсутствие горизонтального скролла, т.е. сайт из двух колонок умещается на экране телефона по принципу смещения одной из колонок под другую — вначале идет текст статьи, затем боковой сайдбар (но бывают и исключения, в случае, если они оправданы).

CSS Медиа запросы @media


Используя конструкции медиа запросов можно задать поведение элементов на сайте под каждый из основных размеров экранов

@media screen and (max-width:1680px){

	.blocks{margin: 10px;} /* широкоформатный монитор ~ 20-21 дюйм */

}
@media screen and (max-width:1360px){

	.blocks{margin: 5px;} /* популярный экран ноутбука ~ 19 дюймов */

}
@media screen and (max-width:1280px){

	.blocks{margin: 0px;} /* квадратный монитор в ~ 17-18 дюймjd */

}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

	.blocks{margin:0px} /* экран мобильного телефона вертикально */
	
}


Техника верстки макета


Одним из наиболее популярных и оптимальных подходов в верстке сайтов является его полная разработка на экране 1920х1080 пикселей (22-24 дюйма), что на данный момент является самым массовым и удобным разрешением экранов т.к. экраны 2к и более пока еще не получили широкого распространения.

А вот пользователей более с низким разрешением экранов более, чем предостаточно и на большом мониторе гораздо удобнее тестировать поведение верстки для меньшего экрана из-за того, что она целиком вмещается на монитор без искажения.

Необходимость


Во-первых, Google. Поисковик уже давно объявил о более лояльном отношении к сайтам, имеющим мобильную версию по отношению к тем, кто до сих пор этого не сделал.

Во-вторых, фундаментальный анализ. Все мы являемся пользователями смартфонов, которых уже не удивить массовым покрытием мобильных сетей стандартом 3G, а также стремительной модернизацией их в 4G LTE.

Т.е. вопрос о необходимости иметь версию сайта, удобную для просмотра с телефона отпадает сам собой. Смартфоны у всех, интернет повсюду, условия использования позволяют комфортно пользоваться мобильным интернетом и получать с него траффик.


Понравилась статья "Mobile-friendly — немного об адаптивной верстке" из раздела Веб разработка » HTML/CSS? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 0 •  Просмотров: 60   Дата: 27-фев-2019, 02:28

Похожие статьи

Комментарии

b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit

© 2010-2017 devarts.pro v 7.0: flexyflat tpl Designed by devarts
Карта сайта HTMLКарта сайта XMLПравообладателям
Яндекс.Метрика