как создать мобильную версию( Responsive Web Design)

[solution]

Кто нибудь знает или может дать совет, руководство как создать Responsive Web Design - страничку для мобильного телефона?
Есть страничка с html и css и надо изменить её для мобильника.
спасибо.

[KVA]

Bootstrap может?

https://getbootstrap.com/

[solution]

Bootstrap может?

https://getbootstrap.com/

Это ведь Framework?
Было сказано не использовать никаких Framework.
Я в общем то представляю как изменить HTML-надо одну линию кода добавить:

<meta name="viewport" content="width=device-width, initial-scale=1">

Но непонятно как изменить css...
Можно также использовать grid ot flex boxes.
На browser должно выглядеть как одна колонка вместо нескольких.
Any ideas?

[BronenosezPotemkin]

Нужно использовать media query, например:

@media screen and (max-device-width: 480px) {
[class*="your div class"] {
width: 100%;
}
}

[solution]

Нужно использовать media query, например:

@media screen and (max-device-width: 480px) {
[class*="your div class"] {
width: 100%;
}
}

Или как внизу где 1 - для мобильника

а 2 - для лаптопа/десктопа.

Правильно мыслю?

Что Structure(внизу) подразумевает?

Ну это явно не цвет(color) и что ещё "не" ?
написано что Structure это Layout.....
Что это значит?


/* Structure */

//1

@media screen and (max-width:480px) {
.header { display: none; }
body, .footer, .navigation {width:100%;}
.column {margin: 10px 0; border-bottom:1px dashed #7b96bc;}
.navigation ul li {width: 100%; /* 33.33334375%; */}
#visit, #points, #main {width:100%;}
}


//2
@media screen and (min-width:481px) {
body, .header, .navigation, .footer {
width: 100%;
}

[Komissar]

Кто нибудь знает или может дать совет, руководство как создать Responsive Web Design - страничку для мобильного телефона?
Есть страничка с html и css и надо изменить её для мобильника.
спасибо.

ты, мать, прохраммистка шо ли?

[ie]

Кто нибудь знает или может дать совет, руководство как создать Responsive Web Design - страничку для мобильного телефона?
Есть страничка с html и css и надо изменить её для мобильника.
спасибо.

https://www.w3schools.com/html/html_responsive.asp

ну и как сказали уже bootstrap вам облегчит жизнь,
особенно если на страницых много всяких вложеных таблиц и т.д.

[solution]

Кто нибудь знает или может дать совет, руководство как создать Responsive Web Design - страничку для мобильного телефона?
Есть страничка с html и css и надо изменить её для мобильника.
спасибо.

ты, мать, прохраммистка шо ли?

Нет...я только учусь.
У меня сыновья программисты.
Но с другом стороны я создала Wordpress sides(вебсайты) используя фотографиями их и их семей и другие что им и не снилось.
Просто я знаю как делать фотографии и компоновать их используя Wordpress.

[solution]

Кто нибудь знает или может дать совет, руководство как создать Responsive Web Design - страничку для мобильного телефона?
Есть страничка с html и css и надо изменить её для мобильника.
спасибо.

https://www.w3schools.com/html/html_responsive.asp

ну и как сказали уже bootstrap вам облегчит жизнь,
особенно если на страницых много всяких вложеных таблиц и т.д.

Очень хороший пример.
спасибо.
Может ещё знаете что значит структура в css и вообще можно ли быстро освоить эти html + css не перелопачивая весь курс.

[BronenosezPotemkin]

Нужно использовать media query, например:

@media screen and (max-device-width: 480px) {
[class*="your div class"] {
width: 100%;
}
}

Или как внизу где 1 - для мобильника

а 2 - для лаптопа/десктопа.

Правильно мыслю?

Что Structure(внизу) подразумевает?

Ну это явно не цвет(color) и что ещё "не" ?
написано что Structure это Layout.....
Что это значит?


/* Structure */

//1

@media screen and (max-width:480px) {
.header { display: none; }
body, .footer, .navigation {width:100%;}
.column {margin: 10px 0; border-bottom:1px dashed #7b96bc;}
.navigation ul li {width: 100%; /* 33.33334375%; */}
#visit, #points, #main {width:100%;}
}


//2
@media screen and (min-width:481px) {
body, .header, .navigation, .footer {
width: 100%;
}

У вас #1 для мобильника, #2 для всего остального. Structure ничего не подразумевает, это просто комментарий, который написал тот, кто делал эту страницу. Можете это удалить или написать что-то другое, ничего не изменится.

[solution]

Нужно использовать media query, например:

@media screen and (max-device-width: 480px) {
[class*="your div class"] {
width: 100%;
}
}

У вас #1 для мобильника, #2 для всего остального. Structure ничего не подразумевает, это просто комментарий, который написал тот, кто делал эту страницу. Можете это удалить или написать что-то другое, ничего не изменится.

Пример которому надо следовать с css внизу(может там какие то неточности)...

разница: надо не 3 а 2 column, т.е надо вероятно 960/2 остальное похоже.

Непонятно для мобильника:

.header { display: none; }

1.Что .header не показан?

Разница между мобильником и остальными:

//мобилник
.column {margin: 10px 0; border-bottom:1px dashed #7b96bc;}

//остальные

.column {
margin: 10px 10px 0 0;
}

2. Почему у остальных нет border-bottom и другая нестыковка?

спасибо.

//rxample

/* Desktop, fixed width CSS */


/* Reset */

* {
margin: 0;
padding: 0;
}


body {
background: #f9f3e9;
color: #594846;
font-family: "Adobe Caslon Pro", Georgia, "Times New Roman", serif;
font-size:100%;
}

a, a:visited {
color: #42628F;
}

p {
margin: 0.5em 0.25em;
}

h1 {
font-size: 1.75em;
border: solid #594846;
border-width: 2px 0;
padding: 0.25em;
text-align: center;
font-variant: small-caps;
}

h2 {
text-align: center;
font-variant: small-caps;
}

dl {
margin: 0 0.5em;
}

dt {
font-weight: bold;
margin: 0.5em 1em 0.5em 0;
border-bottom: 1px dashed #7b96bc;
}

.intro {
font-size: 1.15em;
line-height: 1.3em;
text-align: justify;
margin: 0.5em;
font-weight: bold;
}
.navigation {
background-color:#7b96bc;
border-bottom: 2px solid #594846;
overflow:auto;
}

.navigation ul li {
text-align: center;
display: block;
float: left;
padding: 0.25em 0;
}

.navigation li a {
color: #f9f3e9;
font-variant: small-caps;
text-decoration: none;
}

.header p {
margin-left: -1000px;
}

#points ul {
list-style-image: url('images/point.png');
margin: 0.5em 0 1em 0.5em;
padding-left: 1em;
}

#points ul li {
margin: 0.5em 1em;
}

.footer {
background-color: #7b96bc;
color: #f9f3e9;
text-align: center;
padding: .5em 0;
font-style: italic;
}

img, iframe {max-width:100%;}

/* Structure */

@media screen and (max-width:480px) {
.header { display: none; }
body, .footer, .navigation {width:100%;}
.column {margin: 10px 0; border-bottom:1px dashed #7b96bc;}
.navigation ul li {width: 100%; /* 33.33334375%; */}
#visit, #points, #main {width:100%;}
}

@media screen and (min-width:481px) {
body, .header, .navigation, .footer {
width: 100%;
}

.header, .navigation, .footer {
clear: both;
}

.column {
margin: 10px 10px 0 0;
}

.navigation {
min-height: 25px;
}

.navigation ul li {
width: 33.33333%; /* 960/3 */
}

.header {
background:url(images/w.png) no-repeat;
height: 200px;
}

#visit {
width: 25%;
float: left;
}

#points {
width: 25%;
float: right;
}

#main {
margin: 10px 27.08333% 0 26.04166%;
}
}

[BronenosezPotemkin]

CSS делается под конкретный сайт.
1. Да, обычно header с навигацией на мобильнике не показывают, вместо этого пишется выпадающее меню.
2. Всё остальное тоже показывается/скрывается, дорисовывается, меняются размеры в зависимости от необходимости. Тут нет общих правил.

[solution]

CSS делается под конкретный сайт.
1. Да, обычно header с навигацией на мобильнике не показывают, вместо этого пишется выпадающее меню.
2. Всё остальное тоже показывается/скрывается, дорисовывается, меняются размеры в зависимости от необходимости. Тут нет общих правил.

Ну хотя css для страниц разный но в переводе их на мобил всё же что то должно быть общее:
Например:
1.
прибавить для мобил:
@media screen and (max-width:480px)
прибавить для остальных:
@media screen and (min-width:481px)

2.
Посмотреть на первоначальный код и
изменить для мобил в % и для остальных в px.

Но тут не всё ясно для остальных....
Почему в начальной странице было в px а в измеренной для остальных частично в px а частично в %?
Почему не всё в %?


//первоначальный код

.navigation {
min-height: 25px;
}

.navigation ul li {
width: 320px; /* 960/3 */
}
#visit {
width: 240px;
float: left;
}

#points {
width: 240px;
float: right;
}

#main {
margin: 10px 260px 0 250px;
width: 460px;
}

//измеренной код для остальных:

.navigation {
min-height: 25px;
}

.navigation ul li {
width: 33.33333%; /* 960/3 */
}



#visit {
width: 25%;
float: left;
}

#points {
width: 25%;
float: right;
}

#main {
margin: 10px 27.08333% 0 26.04166%;
}

[ie]

Может ещё знаете что значит структура в css

низнаю что такое структура...

вообще можно ли быстро освоить эти html + css не перелопачивая весь курс.

амммм... в принципе да. ничего там сложного нет.
но конечно зависит от конкретного ч-ка. если времени нет учить все подрят.
я бы посоветовал разобраться в базовых понятиях,
потом копать только то что конкретно нужно.
вопще bootsrap должен облегчить жизнь...
иначи придется писать эти "media screen", и все очень быстро выходит из под контроля...
if you know what i mean.

[ie]

и в догонку, у нас тут был один вэб девелопер, любил размеры имажей указыват типа width:200px, height:100px
что в responsive environment не работает, как вы понимаете.

все должно быть вот так width: 100% ну или там 50% в процентах вопщем.
а высота сама подстроится и картинка тагда поулчается пропорциональной на любом экране
и колдовать с размерами не надо, даже кагда файл меняется.
если надо ограничить размер max-width min-width.