Адаптация сайта под планшет и телефон
Страницы: 1 2 След.
Адаптация сайта под планшет и телефон
Добрый день
Нужно сайт адаптировать под небольшие разрешения скажем подменой css файла. Сайт должен отображаться в 3 видах, можно ли использовать 3 css файла, Если разрешение браузера 1000px и больше то работает 1 файл цсс, если от 400 до 1000 то 2, и от 200 до 400 работает 3 файл, возможно ли так сделать?
Или есть аналоги тохожие, резиновая вёрстка не катит очень хитрый дизайн много несостыковок по рамкам.
достаточно и одного файла стилей. http://htmlbook.ru/css/media учите. можно применять не носители, а разрешения экрана, например

Код
@media (max-width: 767px) {   
 
.container {width:120px}

}
установит правило для блока с классом  container на мониторе, с максимальной шириной 767px. можно так писать
Код
@media (min-width: 481px) and (max-width: 767px) {


container {width:120px}
   
}
 
то есть задаст рамки для размера монитора или браузера от 481 до 767. скачайте bootstrap.css и посмотрите, как в нем устроенно все
спасибо попробую
Вот что получается

Код
div#wrapper{
   max-width:972px;
   height:610px;
   background:url(img/fon2.jpg) no-repeat;
   margin:0 auto;
}

@media (min-width: 500px) and (max-width: 971px) {

div#wrapper{
   max-width:500px;
   background:url(img/fon3.jpg) no-repeat;
   margin:0 auto;
}
div#border4{
   width:18px;
   height:200px;
   background:url(imgramka/verh1.png) repeat-y;
   float:left;
}
}
 

Данный код разместил в конце всего цсс
Всё работает на большом разрешении больше 971 нормально, при сужении окна браузера меньше 971 размер макета становится 500рх как и нужно, но при сужении окна меньше 500рх, оно возвражается к 1 пункту и показывает его как бы на 971px, как задать что бы работаро в пределе 500 и меньше
Цитата
virus_ostr пишет:
Вот что получается
Код
 div#wrapper{
   max-width:972px;
   height:610px;
   background:url(img/fon2.jpg) no-repeat;
   margin:0 auto;
}

@media (min-width: 500px) and (max-width: 971px) {

div#wrapper{
   max-width:500px;
   background:url(img/fon3.jpg) no-repeat;
   margin:0 auto;
}
div#border4{
   width:18px;
   height:200px;
   background:url(imgramka/verh1.png) repeat-y;
   float:left;
}
}
  

Данный код разместил в конце всего цсс
Всё работает на большом разрешении больше 971 нормально, при сужении окна браузера меньше 971 размер макета становится 500рх как и нужно, но при сужении окна меньше 500рх, оно возвражается к 1 пункту и показывает его как бы на 971px, как задать что бы работаро в пределе 500 и меньше
надо прописать все интересующие Вас размеры:

Код
 div#wrapper{
   max-width:972px;
   height:610px;
   background:url(img/fon2.jpg) no-repeat;
   margin:0 auto;
}

@media (min-width: 500px) and (max-width: 971px) {

div#wrapper{
   max-width:500px;
   background:url(img/fon3.jpg) no-repeat;
   margin:0 auto;
}
div#border4{
   width:18px;
   height:200px;
   background:url(imgramka/verh1.png) repeat-y;
   float:left;
}
 @media only screen and (min-width: 280px) {
   правила для маленьких расширений
}
}
Вот прописал эти параметры которые выше, при сужении браузера на компе дизайн меняется как положенно, становится узким и появляютсся полосы прокрутки, а вот открыл на телефоне и вот что получается дизайн меняется , но почемуто не растягивается на всю ширину экрана телефона, а помещает всю страницу на экран вместо растягиваниясайта по ширине и пролистыванием его вниз, 
Подскажите какой параметр необходимо поменять? чтоб было как на картинке
[img]s019.radikal.ru/i630/1406/ce/5328aa936dc4.jpg[/img]


а нужно чтоб так было,

[img]s018.radikal.ru/i515/1406/e9/b2c1c5889798.jpg[/img]
я подозреваю, что Вы прописывается разные размеры под расширения только для центрального блока, а нужно учитывать все элементы...трудно сказать по картинке, что и где нужно менять
зы посмотрите сайт у меня в подписе с разных устройств, а потом его css-ку
(паралакс подгружается только для разрешений больше 1000px)
Код
 body {
   margin:0;
   padding:0;
   background:url(img/fon1.jpg) no-repeat;
   overflow-x: hidden;
}

div#menu { 
     width: 100%; 
    text-align:center;
    white-space: normal; 
} 
  
div#menu a { 
     display: inline-block; 
     width: 162px; 
     height: 44px; 
     background-image:url("img/menu.png"); 
} 

a.k1 { 
    background-position:0 0; 
} 
      a.k1:hover { 
     background-position:162px 0; 
} 

a.k2 { 
     background-position:0 -44px; 
} 
     a.k2:hover { 
     background-position:162px -44px; 
} 

a.k3 { 
    background-position:0 -88px; 
} 
     a.k3:hover { 
     background-position:162px -88px; 
}

a.k4 { 
    background-position:0 -132px; 
} 
     a.k4:hover { 
     background-position:162px -132px; 
}

a.k5 { 
    background-position:0 -176px; 
} 
     a.k5:hover { 
     background-position:162px -176px; 
}

a.k6 { 
    background-position:0 -220px; 
} 
     a.k6:hover { 
     background-position:162px -220px; 
}

H1 {
   color: #FAC907;
   text-shadow: 0 0 10px rgba(70,160,255,0.7);
      font-family: Arial;
   font-size: 76px;
   text-align: right;
   padding-right: 30px;
   margin: 0;
}

H2 {
   background:url(img/g2.png) no-repeat;
   color: #FAC907;
      font-family: Arial;
   line-height: 25px;
   font-size: 22px;
   padding: 0 0 0 35px;
    margin: 0 -10px 2px 569px;
}

div#wrapper{
   width:972px;
   height:610px;
   background:url(img/fon2.jpg) no-repeat;
   margin:0 auto;
}

div#border1{
   width:18px;
   height:18px;
   float:left;
   background:url(imgramka/ug1.png) no-repeat;
}

div#border2{
   width:18px;
   height:18px;
   background:url(imgramka/ug2.png) no-repeat;
   float:right;
}

div#border3{
   width:936px;
   height:18px;
   background:url(imgramka/lenta.png) repeat-x;
   margin-left:18px;
}

div#border4{
   width:18px;
   height:485px;
   background:url(imgramka/verh1.png) repeat-y;
   float:left;
}

div#border5{
   width:18px;
   height:485px;
   background:url(imgramka/verh2.png) repeat-y;
   float:right;
   margin-top:-485px;
}

div#border6{
   width:18px;
   height:18px;
   background:url(imgramka/ug3.png) no-repeat;
}

div#border7{
   width:936px;
   height:18px;
   background:url(imgramka/lenta.png) repeat-x;
   margin-top:-18px;
   margin-left:18px;
}

div#border8{
   width:18px;
   height:18px;
   background:url(imgramka/ug4.png) no-repeat;
   margin-top:-18px;
   margin-left:954px;
}

div#content{
   height:521px;
}

div#contentcenter {
    width: 936px;
    height: 485px;
   margin-left: 18px;
}

div#contentindex {
    width: 936px;
    height: 485px;
   background:url(img/index.jpg) no-repeat;
    margin-left: 18px;
}

div#akcia {
   display: block; 
   width: 140px; 
    height: 140px; 
    margin: -307px 88px;
}

div#akcia a{
   display: inline-block; 
   width: 140px; 
    height: 140px; 
    background-image:url("img/akcia.png");
}

div#akcia2{
   display: inline-block; 
   width: 200px; 
    height: 70px; 
    background-image:url("img/akcia2.png");
   margin: -67px 708px;
}

a.ak { 
     background-position:0 0; 
} 
     a.ak:hover { 
     background-position:140px 0; 
}
#uslugi {
   margin-top: 10px;
   padding-top: 10px;
   height: 230px;
   margin-left: 35px;
}
#uslugi div {
   display: inline-block;
   width: 170px;
   height: 230px;
   vertical-align: top;
   text-align: center;
}
#uslugi a { 
     display: inline-block; 
     width: 150px; 
     height: 148px;
    background-image:url("img/uslugi.png");
} 
#uslugi p {
   vertical-align:top;
   color: #FAC907;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 18px;
   margin-top: 2px;
}

a.i1 { 
    width: 150px; 
     height: 148px;
     background-position:0 0; 
} 
a.i1:hover { 
     background-position:0 -148px; 
}
a.i2 { 
    width: 148px; 
     height: 148px;
     background-position:-150px 0; 
} 
a.i2:hover { 
     background-position:-150px -148px; 
}
a.i3 { 
    width: 148px; 
     height: 148px;
     background-position:-300px 0; 
} 
a.i3:hover { 
     background-position:-300px -148px; 
}
a.i4 { 
    width: 148px; 
     height: 148px;
     background-position:-450px 0; 
} 
a.i4:hover { 
     background-position:-450px -148px; 
}
a.i5 { 
    width: 148px; 
     height: 148px;
     background-position:-600px 0; 
} 
a.i5:hover { 
     background-position:-600px -148px; 
}
a.i6 { 
    width: 148px; 
     height: 148px;
     background-position:-750px 0; 
} 
a.i6:hover { 
     background-position:-750px -148px; 
}
a.i7 { 
    width: 148px; 
     height: 148px;
     background-position:-900px 0; 
} 
a.i7:hover { 
     background-position:-900px -148px; 
}
a.i8 { 
    width: 148px; 
     height: 148px;
     background-position:-1050px 0; 
} 
a.i8:hover { 
     background-position:-1050px -148px; 
}
a.i9 { 
    width: 148px; 
     height: 148px;
     background-position:-1200px 0; 
} 
a.i9:hover { 
     background-position:-1200px -148px; 
}
a.i10 { 
    width: 148px; 
     height: 148px;
     background-position:-1350px 0; 
} 
a.i10:hover { 
     background-position:-1350px -148px; 
}

.price {
    color: #FAC907;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 18px;
}

div#otz {
    overflow: auto;
    width: 936px;
    height: 431px;
   margin-top: 20px;
   border: 0;
}

div#arti {
    overflow: auto;
    width: 896px;
    height: 441px;
   color: #FAC907;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 18px;
   padding: 10px 20px 0;
   text-align: justify;
}

div#arti a{
   color: #FAC907;
}

div#arti a:hover{
   color: #dadada;
}

div#arti ol{
   margin: 0;
}

.zag {
   color: #FAC907;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 18px;
   text-align: center;
   padding-top: 12px;
   font-weight: bold;
}

div#nomermts {
   color: #FAC907;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 27px;
   text-align: center;
   padding-top: 12px;
   background-image:url(img/mts.png);
   background-repeat: no-repeat;
   background-position: 75px bottom;
}

div#nomervel {
   color: #FAC907;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 27px;
   text-align: center;
   padding-top: 12px;
   background-image:url(img/vel.png);
   background-repeat: no-repeat;
   background-position: 75px bottom;
   
}

div#textdown {
   color: #FAC907;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 18px;
   text-align: left;
   padding: 0 30px;
}

div#textdown a { 
   width: 120px;
   height: 33px;
   background-image:url("img/down.png");
   float: right;
   margin: 2px 0 0 30px;
} 

div#textdown a:hover { 
     background-position:0 33px; 
}
div#textdown p { 
     line-height: 18px; 
}
   
div#imgdown a { 
     display: block; 
    position: relative;
    width: 120px; 
     height: 33px; 
    margin-top: 19px;
}
#contact-blok {
   margin-top: 10px;
   padding-top: 10px;
   height: 400px;
   width: 935px;
   margin: -10px 10px;
}
.blok {
   display: inline-block;
   width: 442px;
   height: 300px;
   vertical-align: top;
   margin-left: 20px;
}

div#nomermts {
   color: #FAC907;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 27px;
   text-align: center;
   padding-top: 12px;
   background-image:url(img/mts.png);
   background-repeat: no-repeat;
   background-position: 75px bottom;
}

div#nomervel {
   color: #FAC907;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 27px;
   text-align: center;
   padding-top: 12px;
   background-image:url(img/vel.png);
   background-repeat: no-repeat;
   background-position: 75px bottom;
}
div#textf {
   color: #FAC907;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 18px;
   text-align: justify;
   padding: 5px 50px;
}

div#formline { 
   position: relative;
   left: 460px;
   top: -270px;
   width: 1px; 
    height: 350px;
   background-color: #FAC907;
} 

div#text {
   color: #FAC907;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 18px;
   text-align: justify;
   width: 370px;
   padding: 0 15px;
}

div#formasob {
    color: #FAC907;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 18px;
   text-align: center;
}

div#formachislo {
    color: #FAC907;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 18px;
   text-align: center;
   padding-top: 10px;
}
 
a.down { 
    width: 120px; 
     height: 33px;
    background-image:url("img/down.png"); 
} 
a.down:hover { 
     background-position:0 -33px; 
}

.forma1 {
   color: #000;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
   margin-left: 42px;
   width: 192px;
}

.forma2 {
   color: #000;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
   margin-left: 31px;
   width: 192px;
}

.forma3 {
   color: #000;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
   margin-left: 10px;
   width: 192px;
}

.forma4 {
   color: #000;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
   margin-left: 50px;
   width: 335px;
}

.forma5 {
   color: #000;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
   margin: 15px 200px;
}

.forma6 {
   font-size: 14px;
   margin: 10px 140px;
   width: 170px;
}

table {
   border: 0;
   border-spacing: 0; 
    padding: 0;
   width: 880px;
   color: #FAC907;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 18px;
   margin-top: 15px;
}

tr:hover{
   background-color: #FDCC08;
   color: #000;
}

.pricezag {
   color: #000;
   font-weight: 700;
   font-size: 18px;
}

.g {
   background:url(img/g.png) no-repeat;
   width: 31px;
}

div#nizline{
   width: 805px;
   background-color: #FAC907;
   height: 1px;
   margin: 0 65px 5px;
}

div#niztext{
   position: absolute;
   top: 495px;
   text-align: center;
   color: #FAC907;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 16px;
   font-style: normal;
   width: 935px;
}

div#footer{
   width:972px;
   height:44px;
}

div#rnl{
   float: left;
    width:18px;
   height:44px;
   background:url(imgramka/nl.png) no-repeat;
}

div#rn{
   margin: 24px 0px -44px 18px;
   width: 936px;
   height: 4px;
   background:url(imgramka/n.png) repeat-x;
}

div#rnr{
   float: right;
    width: 18px;
   height: 44px;
   background: url(imgramka/nr.png) no-repeat;
}

div#copytext{
   position:relative;
   left: 20px;
   top: 24px;
   width:500px;
    color: #FAC907;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 13px;
   font-style: normal;   
}
    
div#s1{
   position: relative;
   left: 620px;
   top: -39px;
      height:30px;
   width:82px;
}

div#s2{
   position:relative;
   left:730px;
   top: -39px;
      height:31px;
   width:88px;
}

div#s3{
   position:relative;
   left:845px;
   top: -56px;
      height:31px;
   width:88px;
}

         /* мобильники */

@media (min-width: 200px) and (max-width: 993px) {

body {
   background:url(img/fon1_2.jpg) no-repeat;
}

div#uslugi {
   margin-left: 25px;
}
#uslugi div {
   width: 200px;
}

div#footer {
    width: 487px;
   height: 65px;
}
div#rnl{
   margin-top: 3px;
}
div#rn{
    width:452px;
   margin-top: 45px;
}
div#rnr{
   left:469px;
}
div#copytext{
   left: -6px;
   top: 45px;
}
div#s1{
   display: none;
} 
div#s2{
   display: none;
} 
div#s3{
   display: none;
} 

div#content{
   height:1200px;
   min-width: 487px;
}

div#menu { 
     min-width: 486px; 
}

div#wrapper{
   max-width:487px;
   height: 1353px;
   background:url(img/fon2_2.jpg) no-repeat;
   margin:0 auto;
}

div#border2{
   background:url(imgramka/ug2-1.png) no-repeat;
}
div#border3{
   width:452px;
}
div#border4{
   height: 1189px;
}
div#border5{
   height: 1194px;
   margin-top:-1207px;
}
div#border6{
   margin-top: -14px;
}
div#border7{
   width: 450px;
   margin-top: -18px;
}
div#border8{
   margin-top: -18px;
   margin-left: 468px;
   background:url(imgramka/ug4-2.png) no-repeat;
}

div#contentcenter {
    width: 450px;
    height: 1200px;
   margin-left: 18px;
}

div#arti {

    width: 411px;
   height: 1120px;
}
div#textdown a { 
   margin: 35px 0 15px 30px;
}


div#formline {
   display: none;
}
div#textf {
   padding: 15px 50px;
}
.blok {
   display: block;
   margin-left: 0;
}
div#text {
   padding: 10px 5px;
   width: 424px; 
}
#contact-blok {
   height: 760px;
   width: 435px;
}
table {
   width: 440px;
}
td {
   width: 20px;
}
div#niztext{
   position: absolute;
   top: 1200px;
   width: 430px;
   padding: 0 10px;
}

div#nizline{
   width: 410px;
   margin: 0 10px 5px;
}
a.k3 { 
     background-position:0 -264px; 
} 
a.k3:hover { 
     background-position:162px -264px; 
}
a.k4 { 
     background-position:0 -308px; 
} 
a.k4:hover { 
     background-position:162px -308px; 
}

div#akcia2{
   margin: -30px 240px;
}
div#otz {
    overflow: auto;
    width: 450px;
    height: 1132px;
   margin-top: 20px;
   border: 0;
}


}

нет у вас сайта в подписке(
ну на пк же работает делаю уже окно появляются бегунки вниз, на телефонетак же долно быть
Изменено: virus_ostr - 5 Июня 2014 01:06
Цитата
virus_ostr пишет:
нет у вас сайта в подписке
он отображается только в первом сообщении в теме...
Цитата
virus_ostr пишет:

@media (min-width: 200px) and (max-width: 993px)
Вы немного не попали с размерами мобильников smile:)
вот тут основные размеры и возможность проверить отображение Вашего сайта
У вас построение цсс получается с наименьших разрешений к наибольшим, у меня наоборот с больших к мелким ,но это наверн не причина. Сайт у вас больше на резиновый походит с минимальными изменениями дизайна, и фона у вас нет может это и есть причина есть есть фон то адаптация происходит относительно фона, хотя нет он сам по себе же, не могу понять что не так
ваш сайт отображается как надо)))
Изменено: virus_ostr - 5 Июня 2014 01:30
На сайте отображается ка надо на разрешении 480 x 640 именно растягивая сайт на всю ширину, а на самом телефоне так не делает((( может браузеры телефона мутные хотя тестит в опере и хроме одно и тоже, выравнимает его по всей вертикали, вместо добавления полос прокрутки.
У сайта 2 решима 480 разрешение и всё что выше отображается немного по другому. а всё что мкньше отображается как и на 480 только с прокрутками полос.
Изменено: virus_ostr - 5 Июня 2014 01:44
Цитата
virus_ostr пишет:
У вас построение цсс получается с наименьших разрешений к наибольшим, у меня наоборот с больших к мелким ,но это наверн не причина. Сайт у вас больше на резиновый походит с минимальными изменениями дизайна, и фона у вас нет может это и есть причина есть есть фон то адаптация происходит относительно фона, хотя нет он сам по себе же, не могу понять что не так
не важно от больших к малым или нооборот
зачем нужны изменения дизайна, если это один и тот же сайт?
фон подгружается "фоном" (извиняюсь за тавтологию) и это тоже не причина
адаптация происходит относительно основных элементов, а у Вас не правильно прописаны размеры

из выложенных стилей трудно судить о полной картине, но
Код
H1 {
 ...
   font-size: 76px;
 ...
}
 
поломает маленькие расширения, а

Код
div#niztext{
   position: absolute;
  ...
}
 
создаст проблемы позиционирования...
думаю, пришло время светить сайт smile:)
s43.radikal.ru/i101/1406/4e/3d29ab074530.jpg
как то не правильно работает))) или всё же телефон непонятный.
не поломает это посто перепишется на поменьше под 480 и нормально будет
позиционирование сложно чтот там придумать никак не мог выровнять другими методами
Валентин, неистовый респект за http://motek.16mb.com/wp-content/uploads/2013/02/demo.html smile:)
Страницы: 1 2 След.
Похожие темы:
Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)
Новые темыОбъявленияСвободное общение
14:13 Profit Pixels - In-House Форекс, Крипто, Трейдинг CPA Офферы | Еженедельные Выплаты | CPA до $950 
10:09 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 
21:07 Взрывной рост роботности в Метрике 
18:33 Trafee.com – эффективная монетизация вашего дейтинг трафика 
15:41 Adtrafico - Правильная партнёрская сеть под бурж трафик 
22:12 Stixi.ru. и stixi.com 
20:30 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options 
14:51 Мощные прокси для вашего бизнеса! 
12:17 Продам дешёвые домены (1$/штука) 
10:58 BIGPROXY.SHOP - Резидентные Ротационные Backconnect Proxy USA EUROPA MIX [Безлимитный трафик] 
10:17 Размещу ссылки/статьи на ваш сайт | Рост ИКС | XRumer 23.0.4 StrongAI 
22:12 BestX24 - быстрый и безопасный обменник криптовалют и электронных денежных средств 
18:06 Coin Click.cc - Быстрый и надежный обмен электронных валют в два клика 
05:50 LunaProxy дешевый глобальный резидентный прокси $0,77/ГБ Ротирующийся прокси|Собственный IP|Безлимитный план 
17:56 Точные прогнозы на футбол 
20:09 Сколько сейчас стоит наполнение ИМ? 
12:43 Куплю проигрышные букмекерские аккаунты 
04:33 Половина скидок на распродажах — фейк 
07:53 НейроБабушка наказывает мошенников 
19:59 Осталось 3-5 месяцев до блокировки YouTube в России, — заявил Клименко 
19:57 Пятница 13-ое: VK принял радикальное решение и закрыл доступ к порно контенту