Как перейти на адаптивность ?

[rpmcmerphy]

я сверстал для компов.

Начинаю переходить на адаптивность создал внешнюю табл стилей для моб и назвал small, там беру ширину, а также значения left для позиционирования. Беру эти значения и делю на 480 и умножаю на сто. Со шрифтом размер шрифта делю на 16 и результат пишу в em.

Но получилось в браузере ерунда, одни уменьш другоое - нет. ЧТо я делаю не так ? П

ПОМОГИТЕ....

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}.wrapper{	font-family: DINPro;	width: 40.99060631938514%;	margin: 0 auto;}.header{	position: relative;	box-sizing: border-box;	height: 114px;}.header img, .header input, .header button, .header > a, .header ul {	position: absolute;	}a:visited{	color: black;}a:link{	color: black;}.header input{	left: 843px;	top: 21px;	border-radius: 100px;	box-sizing: border-box;	width: 50,20833333333333%;	height: 28px;	padding-left: 3,541666666666667%;	font-size: 0.875em;	outline: none;	border-bottom: none;	border-top-width: 1px;	background-color: #f2f2f2;}.header button{	background-image: url(pic/search.png);	width: 5,833333333333333%;	height: 28px;	left: 44,98594189315839%;	top: 21px;	background-repeat: no-repeat;	border-radius: 100px;	background-color: #b7b7b7;	border: none;	outline: none;	background-position: center center;}.header ul li{	font-size: 1em;	font-family: DINPro;	display: inline-block;	font-weight: normal;	margin-right: 4,166666666666667%;}.header ul li:hover{background: #eeeeee;}.header button:hover{	cursor: pointer;}.header img[src="pic/B.png"]{	top: 21px;	left: 43,47826086956522%;}.header img[src="pic/foto.png"]{	left: 42,03152364273205%;	top: 21px;}.header ul{	left: 94,58333333333333%;    top: 68px;	}.header img[src="pic/logo.png"]{	top: 12px;}.banner{	box-sizing: border-box;	position: relative;	background-image: url("pic/banner.png");	background-repeat: no-repeat;	height: 377px;}.news{	box-sizing: border-box;	height: 559px;	position: relative;	background-image: url(pic/bg_news.png);	background-repeat: repeat-x;}h1:nth-child(1){	position: absolute;	left: 4,583333333333333%;	top: 21px;	font-size: 0.6666666666666667em;	font-weight: bold;}h1:nth-child(2){	position: absolute;	left: 0.5804111245465538%;	top: 21px;	font-size: 0.6666666666666667em;	font-weight: bold;}.news img{	position: absolute;	top: 57px;}.news ul{	position: absolute;	top: 57px;	left: 400px;	box-sizing: border-box;	width: 77,29166666666667%;	height: 461px;	padding: 13px 30px 15px 28px;	background-color: white;}.news ul li{	color: #e37072;	padding-bottom: 13px;	padding-top: 13px;	font-size: 16px;	border-bottom: 1px dotted black;}.news ul li:first-child{	padding-top: 0;}.news img+ul li:last-child{	margin-bottom: 16px;	box-sizing: border-box;	width: 18.75%;	margin-left: 135px;	padding-bottom: 0;}.news ul+ul{	box-sizing: border-box;	height: 364px;	position: absolute;	top: 57px;	left: 59,9250936329588%;}img[src="pic/library.png"]{	left: 59,9250936329588%;	top: 430px;}.banner_block{	position: relative;	box-sizing: border-box;	height: 398px;	padding-top: 33px;}.banner_block img{	position: absolute;}.banner_block img[src="pic/block_ban_1.png"]{	left: 0;}.banner_block img[src="pic/block_ban_3.png"]{	left: 120%;}.banner_block img[src="pic/block_ban_2.png"]{	left: 59,9250936329588%;}.foto_events{	height: 618px;	background-image: url(pic/bg_events.png);	background-repeat: repeat-x;	position: relative;}.foto_events h2{	font-size: 55.17241379310345em;	color: #ec0048;	position: absolute;	left: 99.58333333333333%;	top: 22px;	font-weight: bold;}.foto_events img[src="pic/events_4.png"]{	position: absolute;	left: 58.60805860805861%;}.foto_events img[src="pic/events_2.png"]{	position: absolute;	left: 74.375%;}.foto_events img[src="pic/events_3.png"]{	position: absolute;	left: 82.05128205128205%;}.foto_events img[src="pic/events_1.png"]{	position: absolute;	left: 0;}.foto_events img[src="pic/events_4.png"], .foto_events img[src="pic/events_2.png"],.foto_events img[src="pic/events_3.png"],.foto_events img[src="pic/events_1.png"]{	position: absolute;	top: 71px;}.foto_events img[src="pic/events_5.png"], .foto_events img[src="pic/events_6.png"],.foto_events img[src="pic/events_7.png"],.foto_events img[src="pic/events_8.png"]{	position: absolute;	top: 299px;}.foto_events img[src="pic/events_6.png"]{	left: 47.91666666666667%;}.foto_events img[src="pic/events_7.png"]{	left: 96.04166666666667%;}.foto_events img[src="pic/events_8.png"]{	left: 58.60805860805861%;}.foto_events a{	position: absolute;	top: 554px;	left: 97.16599190283401%;	color: #ec0048;	border-bottom: 1px dotted #ec0048;	text-decoration: none;}.triangle{	height: 24px;	background-image: url(pic/triangle.png);}.subscription{	position: relative;	height: 134px;	background-image: url(pic/bg_sub.png);	background-repeat: repeat-x;	background-position: 0 11px;	margin-top: -10px;}.subscription h3{	box-sizing: border-box;	height: 67px;	font-size: 0.5517241379310345%;	color: white;	font-weight: bold;	width: 52.5%;	background-image: url(pic/mail.png);	background-repeat: no-repeat;	position: absolute;	left: 4.375%;	padding-left: 71px;	top: 42px;}.subscription input{	position: absolute;	left: 62.70833333333333%;	top: 51px;	width: 97.91666666666667%;	height: 41px;	border-radius: 100px;	font-size: 0.8em;	color: #7e7e7e;	font-weight: normal;	padding-left: 38px;	outline: none;	border: none;}.subscription button{	position: absolute;	left: 0.7559055118110236%;	top: 52px;	box-sizing: border-box;	width: 40.95238095238095%;	height: 41px;	background-color: #ffc000;	border-radius: 0 100px 100px 0;	outline: none;	border: none;	font-size: 0.8888888888888889%;	text-shadow: 0 1px 0px #fff55b;}.subscription h4{	box-sizing: border-box;	height: 67px;	font-size: 0.5517241379310345%;	color: white;	font-weight: bold;	width: 0.525%;	background-image: url(pic/write.png);	background-repeat: no-repeat;	position: absolute;	left: 1.775%;	padding-left: 71px;	top: 42px;}.footer ul li{	font-size: 1em;	font-family: DINPro;	display: inline-block;	font-weight: normal;	margin-right: 20px;}.footer{	position: relative;}.footer ul{	position: absolute;	left: 47.29166666666667%;	top: 94px;}.footer p{	position: absolute;	top: 154px;	left: 69.375%;	font-size: 1em;	font-weight: normal;	width: 92.30769230769231%;	text-align: center;	margin-bottom: 41px;}

[rus]

1) код выкладывайте на jsfiddle

2) проценты округляйте до целых, ну максимум до десятых

3) а шрифт DINPro разве системный?

[rpmcmerphy]

1) Как я выложу картинки все у меня на кмопе

2)я читал макфарленда css3 он пишет не надо округлять

3)нет я скачал его

[rus]

1) картинки сохраняете на любом фотохостинге, наприме savepic

2) это для вас же, вы всегда будете калькулятор с собой носить что бы посчитать сколько блок должен занимать места?

3) раз скачали, то его нужно должным образом подключить, иначе пользователь у которого он не установлен его не увидит.

[rpmcmerphy]

у меня ряд вопросов

например я свделал ширину реппера 1147пиксел, поля по бокоам авто. чтобы перевести в мобиль надо 480 делить на эту ширину ?

как быть с остальным контентом внутри раппера и высотой ?

[rus]

а зачем делить то? посмотрите какие разрешения используют планшеты, а какие мобильные, в основном это:

768 - планшеты

320 - мобилы

в медиазапросах соотв. делаете условие:

@media screen and (max-width: 768px) {  // ваши классы и айди со стилями}

что-то стилями вы скроете, у чего-то вы сделаете меньше ширину и т.д...

[rpmcmerphy]

Спасибо. То есть не обязательно ширину делать в процентах, можно в абсолютных величинах ?

у меня нет макета psd для планшета и мобильных. Как тогда , примерно подгонять ?

И еще вопрос , можно как нибудь bootstrap использовать для адаптивности, если да, то как ?

[rus]

верстая под мобильные устр-ва, желательно все величины переводить в % но не обязательно.

просто вы запаритесь подгонять, да и кода в css станет несколько больше.

[rpmcmerphy]

понятно, а как с высотой и топ, как их пересчитать ? Какую брать высоту моб устройства ?

[rus]

зачем вам высота? погуглите разрешения экранов моб. устр.

[rpmcmerphy]

http://cssdeck.com/labs/rdwwhjvr

Делаю адаптивную верстку. Посмотрите почему картинки из класса .block_banner появляются в классе .news хотя в html идут после второго ul ?

Помогите

под блоком с классом news

Edited September 24, 2015 by rpmcmerphy

[rus]

блоку .news - overflow:hidden;