Пороговые значения для мобильной вёрстки

Опубликовано чт, 02/11/2016 - 10:56 пользователем admin

Имеется 3 мобильных шаблона PSD:

Mobile portrait (320px)
Mobile landscap (480px)
Tablet (768px)

И 1 десктопный шаблон PSD:

Desktop (1024px)

Брейкпойнты для CSS:

<320px - Появляется скролл
 
@media screen and (max-device-width: 479px) {
  // (320px - Mobile portrait)
  // (479px - Mobile landscape)
}
 
@media screen and (max-device-width: 767px) {
  // (480px - Mobile landscape)
  // (767px - Tablet)
}
 
@media screen and (max-device-width: 1023px) {
   // (768px - Tablet)
   // (1023px - Tablet)
}
 
>=1024px - Десктоп версия

В промежуточных расширениях 321px-479px, 481px-767px и 781px-1023px используется резиновая вёрстка без появления горизонтального скролла.

Для тестирования мобильной вёрстки:

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style>
	.blocks{
	width:100%;
	text-align: center;
	}
	.blocks > div{
	display: inline-block;
	text-align:center;
	vertical-align: top;
	margin-right: 52px;
	}
	::-webkit-scrollbar {
	width: 0;
	background: transparent;
	}
	</style>
	</head>
	<body>
	<div id="frames" class="widthOnly">
	<div id="inner" class="blocks">
	<div id="f2" class="frame">
	<h2>Ширина 320px</span></h2>
	<iframe src="http://localhost:3000/" sandbox="allow-same-origin allow-forms allow-scripts" seamless="" width="320" height="800"></iframe>
	</div>
	<div id="f3" class="frame">
	<h2>Ширина 480px</span></h2>
	<iframe src="http://localhost:3000/" sandbox="allow-same-origin allow-forms allow-scripts" seamless="" width="480" height="800"></iframe>
	</div>
	<div id="f4" class="frame">
	<h2>Ширина 767px</span></h2>
	<iframe src="http://localhost:3000/" sandbox="allow-same-origin allow-forms allow-scripts" seamless="" width="767" height="800"></iframe>
	</div>

	</div>
	</div>
	</body>
	</html>

view raw layouts.html hosted with ❤ by GitHub