Как рассчитать ширину блоков для адаптивного дизайна?

можно указывать фиксированные размеры, можно в процентах

Я не могу понять где какой блок чтобы его подогнать(((

Вот мой ксс

 @media screen and (min-width: 1300px) {#photomod:nth-child(3n) {margin-right: 0;}}

 @media screen and (max-width: 1285px) and (min-width: 1020px){

    #maincont, .headline, #header, #headmenu, .footline, .fbgtop  {width: 1000px;}

	.breadcrumb {width:940px;}

    #content, #boarditem, .boardid, .allcont, .fullstory img, #firstinf, .fipic, .fipic img, #lascom, #news, #indextabs, .intabs, #lastphotos { width: 750px;}

	#firstinf span, .intabs_cont {width:710px;}

	#sidebar-r{width: 750px;}

	.right-block {width:49%;float: left;margin-right: 15px;}

	.right-block:nth-child(2n) {margin-right:0}

    #sidebar-ltabs {width: 90%;}

	.bcontpoll {width:99.4%;padding-bottom: 20px;}

	.tntitle, .btitle, .btitlemenu, .catsTable, .btitlepoll   {width:100%;}

	.btitlepoll { background-position: center 28px;}

	.todaynews {width:92%;}

	.tnews { width: 99%;}

	.bcontpoll .pollBut, .bcontpoll .pollButblue {width:50%; float:left}

	#secinf, .secpic, .secpic img, #thirdinf, .thirdpic, .thirdpic img, #fourthinf, .fourthpic, .fourthpic img{ width: 249px;}

	#secinf span, #fourthinf span, #thirdinf span{width: 209px; }

	#headmenu ul li a {padding: 0 15px;font-size: 16px;}

	.fblock {width: 303px;}

	.searchForm {width: 300px;margin-left:20px;}

	.schQuery input { width: 240px !important;}

	.logout a {width:130px;}

	.logo{background-size: 220px;}

	.relatednews, .relatednews img, .relatednews .adsinftext, .relatednews .adsinfpic {width:139px !important;}

	#photomod, .pmpic, .pmpic img {width:236px;}

	.pmtext {width:233px;}

	.lastnews, .ln {width: 490px;}

	.wln a { width:445px;}

	.alladsindex {width: 681px;}

	.adsinf, .adsinfpic, .adsinfpic img, .adsinftext {width: 166.2px;}

	.lastphotospic, .lastphotospic img, .lastphotospic img:hover  {width: 172.5px;}

	#photomod:nth-child(3n) {margin-right: 0;}

	.nncont, .ninfo {width: 500px;}

}

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

    #maincont, .headline, #header, #headmenu, .footline, .fbgtop  {width: 800px;}

	.breadcrumb {width:740px;}

    #content, #boarditem, .boardid, .allcont, .fullstory img, #firstinf, .fipic, .fipic img, #lascom, #news { width: 550px;}

	#firstinf span, #indextabs {width:510px;}

	#sidebar-r, .lastnews, .ln, .intabs, #lastphotos, .ntitle{width: 550px;}

	.boardtitle {width:100%;}

	.right-block {width:100%;margin-top:0;}

	.right-block:nth-child(2n) {margin-right:0}

	#sidebar-ltabs {width: 93%;}

	.todaynews {width:94%;}

	.tntitle, .btitle, .btitlemenu, .catsTable, .btitlepoll, .lasttopnews   {width:100%;}

	.btitlepoll { background-position: center 28px;}

	.bcontpoll {width:99.4%;padding-bottom: 20px;}

	.tnews { width: 99%;}

	.bcontpoll .pollBut, .bcontpoll .pollButblue {width:50%; float:left}

	#secinf, .secpic, .secpic img, #thirdinf, .thirdpic, .thirdpic img, #fourthinf, .fourthpic, .fourthpic img{ width: 182px;}

	#secinf span, #fourthinf span, #thirdinf span{width: 142px; }

	.secpic {height:120px;}

	.secpic img {  min-height: 120px;max-height: 120px;}

	#thirdinf span, #secinf span, #fourthinf span { margin-top: -120px;height: 110px;padding-top:10px;}

	#firstinf, .fipic {height:310px;}

	.fipic img {min-height:310px;}

	#firstinf span {margin-top:-310px;padding-top:164px;}

	#thirdinf span a, #secinf span a, #fourthinf span a { height: 40px;overflow: hidden;display: block;}

	#headmenu ul li a {padding: 0 15px;font-size: 16px;}

	.fblock {width: 303px;}

	.searchForm {width: 200px;margin-left:2px;}

	.schQuery input { width: 140px !important;}

	.logout a {width:120px;margin-right:0;}

	.profile a {width:160px; background: #478ec1;    padding-right: 15px;padding-left: 10px;}

	.profile a:hover {background: #5a9ac7;}

	.profile-logged a{margin-right:0;}

	.logo{background-size: 200px;}

	.relatednews, .relatednews img, .relatednews .adsinftext, .relatednews .adsinfpic {width:139px !important;}

	#photomod, .pmpic, .pmpic img {width:265px;}

	.pmtext {width:233px;}

	.lasttopnews { border-top: 1px solid #f2f2f2; margin-top:10px; }

	.lasttopnews span {margin-top: 20px; width: 92.5%;}

	.wln a { width:505px;}

	.ltn {float:left;border-bottom:0;}

	.ltn, .ltnpic, .ltnpic img {width:143px;}

	.ltnpic {height:90px;}

	.intabs_cont {width: 507px;}

	.alladsindex {width:470px; }

	.adsinf, .adsinfpic, .adsinfpic img, .adsinftext {width: 246px;}

	.adsinf:nth-child(2n) {margin-right:0;}

	.lastphotospic:nth-child(4n-1) {margin-right:0;}

	.adsinfpic {height: 156px;}

	.rur { margin-bottom: 20px;}

	.adsinftext {height:54px;}

	.lastphotospic, .lastphotospic img, .lastphotospic img:hover {width:265px;}

	.lastphotospic img, .lastphotospic img:hover {min-height:170px;}

	.lastphotospic {height:170px;  margin-bottom: 20px;}

	.fblock:nth-child(1) {width:100%; }

	.fblock  {width:50%;margin:10px 0 10px 0;}

	.btitle-l { height: 45px;line-height: 45px; font-size: 16px;}

	#sidebar-l ul.uMenuRoot li, #sidebar-l ul.uMenuRoot li a {height: 40px;line-height: 40px;}

	.nav_btn {display: block;}

	.homelink {display:none;}

	#headmenu {height:50px;}

	.headmenu ul.main_nav { position: absolute; width:800px; height: auto; z-index: 9999;display: none;}

	#headmenu ul li a {line-height:40px !important;}

	.headmenu li, .headmenu li a { float: none;height: auto !important;}

	.headmenu ul li ul, .headmenu li a:hover{background:#66983A !important;}

	.headmenu li li a { padding: 2px 25px 0 25px !important;}

	#headmenu ul li ul li a:hover { background: #73a845 !important;}

	.headmenu li { float: left; position: relative;display: block;width: 100%; height: 40px;border-top: 1px solid #90c067;z-index: 100;}

	.headmenu li ul {display: block !important; position: relative!important;height:auto;left: auto;}

	li.uWithSubmenu a:after {font-family:FontAwesome;content:"\f0d7";font-size: 14px;display: block;position: absolute; top: 0px;right: 8px;}

	li.uWithSubmenu li a:after, .uMenuRoot li.uWithSubmenu a:after{content: "" !important;}

	.relatednews, .relatednews .adsinfpic, .relatednews .adsinfpic img, .relatednews .adsinftext {width: 172px !important;}

	.relatednews .adsinfpic {height:110px !important;}

	.infoblock {float:left}

	.infoblock span { width: 50%;line-height: 20px;float: left;}

	.npic, .npic img {width:200px;}

	.npic {height:130px;}

	.nncont, .ninfo {width:330px;}

	.bileft {width:420px;}

	.boardmess, .boardinf {width:250px;}

	.boardinf .bdate {display:none;}

	#photomod:nth-child(2n) { margin-right: 0;}

	.boardphone {width:248px;}

	.boardbigpic, #scrollbar1 .viewport {height:300px !important; overflow:hidden;}

	.boardbigpic img {min-height:300px;}

	.profile_cell { width: 49.73%;}

}

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

    #maincont, .headline, #header, #headmenu, .footline, .fbgtop  {width: 600px;}

	.breadcrumb {width:540px;}

    #content, #boarditem, .boardid, .allcont, .fullstory img, #firstinf, .fipic, .fipic img, #lascom, #news { width: 560px;}

	#content {margin-left: 20px;}

	#firstinf span, #indextabs {width:520px;}

	#sidebar-r, .lastnews, .ln, .intabs, #lastphotos{width: 100%;}

	.right-block {width:560px;margin-left: 20px;}

	.bcontpoll .pollBut, .bcontpoll .pollButblue {width:50%; float:left}

	#secinf, .secpic, .secpic img, #thirdinf, .thirdpic, .thirdpic img, #fourthinf, .fourthpic, .fourthpic img{ width: 186px;}

	#secinf span, #fourthinf span, #thirdinf span{width: 146px; }

	.secpic {height:120px;}

	.secpic img {  min-height: 120px;max-height: 120px;}

	#thirdinf span, #secinf span, #fourthinf span { margin-top: -120px;height: 110px;padding-top:10px;}

	#firstinf, .fipic {height:310px;}

	.fipic img {min-height:310px;}

	#sidebar-r {margin-right:0; margin-left:20px;}

	#firstinf span {margin-top:-310px;padding-top:164px;}

	#thirdinf span a, #secinf span a, #fourthinf span a { height: 40px;overflow: hidden;display: block;}

	#headmenu ul li a {padding: 0 15px;font-size: 16px;}

	.fblock {width: 303px;}

	.searchForm {width: 338px;margin-left:20px; margin-bottom: 25px;}

	.schQuery input { width: 278px !important;}

	.logout a {width:120px;margin-right:0;}

	.profile a {background: #478ec1 url(../images/prof.png) right no-repeat;   padding-right: 0;padding-left: 0;}

	.profile a:hover { background: #5a9ac7 url(../images/prof.png) right no-repeat;}

	.profile a {width:170px;}

	.login_block {top:200px;}

	.logo{background-size: 200px;}

	.relatednews, .relatednews img, .relatednews .adsinftext, .relatednews .adsinfpic {width:139px !important;}

	#photomod, .pmpic, .pmpic img {width:270px;}

	.pmpic {height:190px;}

	.pmtext {width:267px;}

	.lasttopnews { border-top: 1px solid #f2f2f2; margin-top:10px; }

	.lasttopnews span {width: 91%;}

	.wln a { width:515px;}

	.ltn {float:left;border-bottom:0;}

	.ltn, .ltnpic, .ltnpic img {width:143px;}

	.ltnpic {height:90px;}

	#searchsuggestions {width: 323px;}

	.intabs_cont {width: 517px;}

	.alladsindex {width:480px;margin-top: 590px;}

	.adsinf, .adsinfpic, .adsinfpic img, .adsinftext {width: 251px;}

	.adsinf:nth-child(2n) {margin-right:0;}

	.adsinfpic {height: 156px;}

	.rur { margin-bottom: 20px;}

	.adsinftext {height:54px;}

	.lastphotospic, .lastphotospic img, .lastphotospic img:hover {width:270px;}

	.lastphotospic {height:170px;  margin-bottom: 20px;}

	.lastphotospic img {min-height:170px;}

	.fblock:nth-child(1) {width:100%; }

	.fblock  {width:50%;margin:10px 0 10px 0;}

	.btitle-l { height: 45px;line-height: 45px; font-size: 16px;}

	#sidebar-l {display:none;}

	.headmenu ul.main_nav { position: absolute; width:600px; height: auto; z-index: 9999;display: none;}

	.relatednews, .relatednews .adsinfpic, .relatednews .adsinfpic img, .relatednews .adsinftext {width: 175px !important;}

	.relatednews .adsinfpic {height:110px !important;}

	.login-btn a, .logout a, .profile-logged a {width:50%;margin-top:20px; margin-right:0;float: left;    margin-bottom: 20px;}

	.login-btn a {float:right;padding-right:0; }

}



 

}

#sidebar-r - правый сайдбар

ps: ненавижу id в стилях

А какие размеры @media брать под телефоны?

karen1994, понимаешь, тут от макета зависит. я делаю так, чтоб одинаково нормально было на любых разрешениях (если нет отдельных макетов и требований).

Поэтому размеры могут быть самыми разнообразными.

Ориентируюсь на минимальную ширину в 320px

Если например брать разрешение минимальное и максимальное и взять блок контента и сайтбара 1000px, контект ~700 и сайтбар к примеру 300, то в респонсиве для разрешений

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

.maincont {width: 720px;}

.sidebar {width: 300px;}

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

.maincont {width: 574px;}

.sidebar {width: 100%;}

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

.maincont {width: 434 px;}

.sidebar {width: 100%;}

Вот так верно будет? Или лучше вместо 434 поставить 70% а вместо 100% поставить 30%??? Как будет правильнее?

В верстке такое дело. Правильных решений может быть несколько.

при 1019px сайдбар упадет.

и не хватает }

подобные правила скорее нужно писать для min-width

ну и я бы рекомендовал использовать в промежуточных версиях и min-width и max-width

А как тогда правильно сделать чтобы не упал?

Ну что вы не можете проценты сами посчитать?