Jump to content
Sign in to follow this  
Hugo

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

Recommended Posts

Товарищи программисты, подскажите какие данные прописать в 

 

@media only screen and 
.container
.category_container, .box 
 
чтобы сайт нормально отображался на любых мобильных устройствах
 

@media only screen and (min-width: 990px) {
#header .links {
display: block !important;
}
}
@media only screen and (max-width: 1170px) {

.nivoSlider, .slideshow { min-height:60px;}
#all_header, .main, .ma-nav-mobile-container.containermenu,
.fixwidth{ width:100%;}
.ma-nav-mobile-container.default {width: 100%;}

#footer, #powered, #all_header, .container > #center_custom_box, #center_custom_box, #container > .verticaltab .box-product-category{ min-width:100%;}
#footer, #powered{ padding-left:0; padding-right:0; width:auto;}

.itemcolumns img, .block2 .image img { max-width:100%; height:auto !important;}
.product-grid .image img { max-width:100%; height:auto !important;}

.box-content > .box-product > div{width: 23.9%;}
#column-left + #column-right + #content .box .box-content > .box-product > div {width: 47.9%;}
#column-left + #content .box .box-content > .box-product > div,
#column-right + #content .box .box-content > .box-product > div { width: 31.9%;}

#column-left + #column-right + #content .verticaltab .about_category{ margin-right:0px; margin-bottom:20px;}

#column-left + #column-right + #content .product-grid > div {width: 47.9%;}

table.form textarea{ width:90%;}
select{ width:150px;}
input.large-field, select.large-field{ width:180px;}
.return-quantity input{ width:120px;}

.content-news img{ max-width:100%; height:auto !important;}

.matban_box.maska_text .one img{ width:100%; height:auto !important;}
#footer .customblock_footer > div img, .header_contact img,
.product_custom img, .tab-content img{ max-width:100%; height:auto !important;}

.matban_box.stylebanner:last-child{ margin-right:0px;}

}
@media only screen and (min-width: 990px) and (max-width: 1169px) {
.container{ width:960px;}
.menu > ul > li > a{padding-left:8px; padding-right:8px;}
#column-left + #content .product-grid > div,
#column-right + #content .product-grid > div {width: 31.9%;}
#content .product-grid > div {width: 23.9%;}

.category_container, .box { max-width:960px;}


#header .header_contact{ width:35%;}

#column-left + #column-right + #content .product-list .centr { margin-right: 0px;}
#column-left + #column-right + #content .product-list .right { margin-left: 250px; position:relative; right:auto; top:auto;}

#footer .column { width:226px; }
#footer .column.three { width:144px; }
#footer .column.width50{ width: 472px;}

.content_carou .itemcolumns{ width:240px;}

}
@media only screen and (max-width: 989px) {
#header #logo { float:none; display:inline-block;}
.navbar #search{ position:absolute; right:0;}
#header .header_contact{ width:100%; display:block;}
#column-right{ display:none;}
#column-right + #content { margin-right:0px; }
.product-filter .sort { clear:both;}
#footer span.ctr{ clear:both; display:block;}
.movepanel{ display:none;}


.product-info > .left + .right {margin-left: 0px; }
.product-info > .left{ float:none; margin-bottom:20px;}
.product-info > .left .image{ float:none; margin-right:0;}

.product-info .image-additional{ float:none; width:100%;}
.product-list .centr { margin-right: 0px;margin-left: 220px;}
.product-list .right { margin-left: 220px; position:relative; right:auto; top:auto; text-align:left;}
.product-list .left{ max-width:200px;}
.product-list .left .image img{ width:100%; height:auto !important;}

.box-content > .box-product > div{width: 31.9%;}
#column-left + #content .box .box-content > .box-product > div, #column-right + #content .box .box-content > .box-product > div {width: 47.9%;}

/*News*/
.box-news.countnews-3,
.box-news.countnews-4,
.box-news.countnews-5{ width:100%; margin-right:0; padding-bottom:20px; border-bottom:1px solid #ddd; }
.box-news .newsimage img{ max-width:100%; height:auto !important;}

/*Module banner*/
.matban_box.beforetext .one img{ max-width:100%; height:auto !important;}

.matban_box .box_maska .stylebanner + .stylebanner{ margin-left:0;}
.count-5, .count-9{ width:33.3%;}
.count-4, .count-6, .count-7, .count-8,.count-10{ width:50%;}
.count-2{ width:100%;}

.product-grid .hover_but > div,
.box-product .hover_but > div, .block2 .hover_but > div {
-webkit-transform: scale(1);
-o-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
}

.full_container{ overflow:hidden;}
.full_container .matban_box.maska_text{ margin:0;}
.prod_review_box .center_desc3{margin-right:0px;}
.prod_review_box .center_desc3 .center_desc3_right{ margin-right:0;}
.prod_review_box .featured_review{
position:relative;
top:auto;
right:auto;}
div.links{ display:none;clear: both;}
.btnNav {display: block;}
#header .links > div{
display: block;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
white-space: normal;
}
#header .links > div:first-child{ border-top:1px solid rgba(0,0,0,0.08);}
}
@media only screen and (min-width: 790px) and (max-width: 989px) {
.container{ width:766px;}
.category_container, .box { max-width:766px;}
#column-left + #content .product-grid > div,
#column-right + #content .product-grid > div {width: 47.9%;}
#content .product-grid > div {width: 31.9%;}

.category-list ul { width:33%;}

#footer .column.three { width:235px;}
#footer .column.width50, #footer .column{ width: 756px;margin:0 0 20px 0; min-height:auto;}
.content_carou .itemcolumns{ width:263px;}
#column-left + .content_carou .itemcolumns, #column-right + .content_carou .itemcolumns{ width:255px;}

}
@media only screen and (max-width: 789px) {
#column-left, #column-right{ display:none;}

#column-left + #column-right + #content, #column-left + #content, #column-right + #content , #content { margin-left:0px; margin-right:0px; }
.return-model, .return-name, .return-reason, .return-opened{ float:none; width:90%;}
#content .content .right, #content .content .left{ float:none; width:90%;}

.htabs a {font-size:12px;}


.verticaltab .box-product-category .about_category > .image img{width:100%; height:auto !important;}
.verticaltab .box-product-category .about_category > .image{ float:none; }

#header #cart, #header .position_cart #cart{ position:relative; top:0px;}
#header #search{ position:relative; top:0; text-align:right; margin-bottom:10px;}
.pagination{ border:none; text-align:center;}
.pagination .links{border-top:1px solid #ddd; border-bottom:1px solid #ddd; float:none;}
.pagination .results{ float:none;}
#footer .extras{ margin-bottom:10px;}


.news_page .image{ float:none; margin-bottom:20px;}
.news_page .image img{ max-width:100%;}
.box-news.countnews-2{ width:100%; margin-right:0;}

.count-2,.count-3{ width:100%;}
.count-5,.count-7,.count-9,
.count-4,.count-6,.count-8,.count-10{ width:50%;}

.block2{ text-align:center;}
.prod_review_box .block2 .image{ float:none;}
.block2 .center_desc3{ text-align:center;}

.block2 .description{ display:none;}
.block2 .image{ float:none; margin-right:0;}
.product-grid > div:hover .savemoney,.box-product > div:hover .savemoney,
.box-product div.itemcolumns:hover .savemoney, .block2:hover .savemoney{ display:none;}
.matban_box.slider_banner.double .threeheading{ font-size:2em;}
.matban_box.slider_banner.double, .matban_box.slider_banner.double.doubleleft{ width:100%; margin-left:0; float:none;}

}

@media only screen and (min-width: 480px) and (max-width: 789px) {
.container{ width:448px;}
.category_container, .box { max-width:448px;}

#column-left + #content .product-grid > div,
#column-right + #content .product-grid > div,
#content .product-grid > div {width: 47.9%;}

#header #search input{ width:417px;}
#header #cart .content{ width:432px;}

.category-list ul { width:49%;}

#footer .column, #footer .column.three { float: none; width: 100%; min-height: auto; margin:0 0 20px 0;}
#footer .column.width50{ width: 448px;}
#column-left + #content .box .box-content > .box-product > div,
#column-right + #content .box .box-content > .box-product > div,
.box .box-content > .box-product > div {width: 47.9%;}

.content_carou .itemcolumns{ width:224px;}

}
@media only screen and (max-width: 479px) {
.cart-inf0 .image, .cart-inf0 .model, .cart-inf0 .price{display:none;}
.container{ width:280px;}
.main, #footer, #powered, #all_header, .ma-nav-mobile-container.containermenu,.fixwidth, #center_custom_box{min-width:320px;}
.category_container, .box, .container > #center_custom_box, #container > .verticaltab .box-product-category{ max-width:280px;}
.content_carou .itemcolumns { width:280px; padding:0; margin:0;}
.jcarousel-skin-opencart a img { width:40px; }


#header #search input{ width:249px;}
#header #cart .content{ width:264px;}
/*.navbar #search{ margin:8px 0; float:none; position:relative; top:8px;}*/

.category-list ul { width:99%;}
.htabs{ height:68px;}
.product-info > .left > .image a img#main-image{ width:258px; height:auto !important;}
.zoomContainer{ display:none;}

.login-content .left, .login-content .right { float:none; width:98%;}
.sitemap-info .left, .sitemap-info .right{ float:none; width:98%;}

.product-compare{ display:none;}
#column-left + #column-right + #content .box .box-content > .box-product > div {width: 100%;}
#column-left + #column-right + #content .product-grid > div,
#column-left + #content .product-grid > div,
#column-right + #content .product-grid > div,
#content .product-grid > div, .product-grid{width: 100%; margin-right:0;}
.product-list .owl-carousel{ float:none;}
.product-list > div { padding:10px 20px;}
.product-list .left{ float:none; margin-bottom:10px; width:230px;}
.product-list .right, .product-list .centr{ margin-left:0px;}

.product-info .option > label {width: auto; float:none;}
.product-info .option > .option_field{ margin-left:0px;}
.product-info .left .image a.colorbox img{ width:100%; height:auto !important;}

.checkout-content .left, .checkout-content .right{ float:none; width:99%;}


#footer .column { float: none; width: 100%; min-height: auto; margin:0 0 20px 0;}
#footer .column.width50{ width: 280px;}


#column-left + #content .box .box-content > .box-product > div,
#column-right + #content .box .box-content > .box-product > div,
.box .box-content > .box-product > div {width:280px;}

.count-3,.count-5,.count-7,.count-9,
.count-2,.count-4,.count-6,.count-8,.count-10{ width:100%;}
.list_carousel{ padding:0;}
div > .quickviewbutton, .itemcolumns:hover > div > .quickviewbutton, div:hover > .quickviewbutton {display:none;}

Share this post


Link to post
Share on other sites

это так не делается, все порядком сложнее

Share this post


Link to post
Share on other sites

Вы хотите разобраться или хотите что бы было сделано? 

Если первое, начните с вопроса, использовать min-width или min-device-width?

Share this post


Link to post
Share on other sites

Да, первое, использовать min-width или min-device-width?

Share this post


Link to post
Share on other sites

Просто нужно прописать те данные, чтобы сайт правильно отображался на любом мобильном устройстве. А то на тел. так, а на планшете по другому, а если планшет перевернуть в горизонтальное положение, то совсем по другому отображается сайт

Share this post


Link to post
Share on other sites

Вам по идее нужно прописывать условия @media для нескольких разрешений,ну допустим для max-width 300px,max-width 500px,max-width 600px... Как то так

Share this post


Link to post
Share on other sites

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

Просто в шаблоне есть кнопка "адаптация к мобильным устройствам". При выключенной кнопки, гугл не видит мобильной версии сайта или видит, но коряво. Мне то не принципиально, есть или нет мобильной версии, я хочу поисковикам угодить.

Share this post


Link to post
Share on other sites

я слышал про эту волшебную кнопку, но она будет стоить от 10 тысяч рублей, если вы готовы пишите в ЛС адрес сайта. 

Share this post


Link to post
Share on other sites

Так она у меня есть же.

Share this post


Link to post
Share on other sites

Вам по идее нужно прописывать условия @media для нескольких разрешений,ну допустим для max-width 300px,max-width 500px,max-width 600px... Как то так

Вообщем понятно, буду для каждого прописывать.

Спасибо

Share this post


Link to post
Share on other sites

Вообщем понятно, буду для каждого прописывать.

Спасибо

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

не достаточно на разрешении 300 пикселей уменьшить контейнер, так как у вас все блоки будут друг на друга залазить

Не мучайтесь - купите готовый шаблон и поправьте под свой стиль магазина

Share this post


Link to post
Share on other sites

Einshtein, так это и есть готовый шаблон, я его и покупал чтоб не мучаться. Задав вопрос автору шаблона, в ответ получил следующее:

В этих двух строках вместо 448 вставлять свои значения, которые подойдут для моего удовлетворения.

@media only screen and (min-width: 480px) and (max-width: 789px) {

.container{ width:448px;}

.category_container, .box { max-width:448px;}

Я где то читал, что можно в процентах задавать размеры. Такой вариант не решит мою проблему?

Share this post


Link to post
Share on other sites

Einshtein, так это и есть готовый шаблон, я его и покупал чтоб не мучаться. Задав вопрос автору шаблона, в ответ получил следующее:

В этих двух строках вместо 448 вставлять свои значения, которые подойдут для моего удовлетворения.

@media only screen and (min-width: 480px) and (max-width: 789px) {

.container{ width:448px;}

.category_container, .box { max-width:448px;}

Я где то читал, что можно в процентах задавать размеры. Такой вариант не решит мою проблему?

если шаблон адаптивный, то зачем что-то менять. Если не адаптивный - то это работа для профессионала и лучше купите адаптивный шаблон

Share this post


Link to post
Share on other sites

Понял. Спасибо

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.