Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Каков принцип верстки на разные устройства? / 22 сообщений из 22, страница 1 из 1
17.12.2015, 19:47
    #39131251
vladka63
vladka63
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Каков принцип верстки на разные устройства?
Подскажите пожалуйста..

Сайт может быть просматриваем на разных устройствах.
Понятно, что на экране компьютера он более наполнен разными элементами (дизайнерскими).
А каков принцип верстки, когда часть элементов видных на экране компьютера - не должны быть показаны при просмотре, например, на "телефоне"?
Как их "прятать"?

Спасибо.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.12.2015, 20:04
    #39131266
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Каков принцип верстки на разные устройства?
например,

Код: css
1.
2.
3.
@media screen and (max-device-width:480px) {
   .myclass { display:none; }
}



и в HTML-коде страницы обязателен мета-тег viewport , например
Код: html
1.
<meta name="viewport" content="width=device-width, initial-scale=1.0">



чтобы устройство само выбрало, как ему лучше отображать страницу.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.12.2015, 21:26
    #39131321
vladka63
vladka63
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Каков принцип верстки на разные устройства?
бухалтер фантоццинапример,

Код: css
1.
2.
3.
@media screen and (max-device-width:480px) {
   .myclass { display:none; }
}



и в HTML-коде страницы обязателен мета-тег viewport , например
Код: html
1.
<meta name="viewport" content="width=device-width, initial-scale=1.0">



чтобы устройство само выбрало, как ему лучше отображать страницу.

Спасибо большое!
Вы очень помогли! :0)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.12.2015, 21:41
    #39131332
vladka63
vladka63
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Каков принцип верстки на разные устройства?
Смотрю разъяснения по поводу @media screen

А как, интересно, имея собственный экран, пусть шириной "1450px"
Просмотреть, как выглядит верстка при ширине "481px"?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.12.2015, 21:45
    #39131336
miksoft
miksoft
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Каков принцип верстки на разные устройства?
vladka63А как, интересно, имея собственный экран, пусть шириной "1450px"
Просмотреть, как выглядит верстка при ширине "481px"?речь о мобильном устройстве?
на обычном компе не обязательно распахивать окно на весь экран.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.12.2015, 22:00
    #39131349
vladka63
vladka63
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Каков принцип верстки на разные устройства?
miksoftvladka63А как, интересно, имея собственный экран, пусть шириной "1450px"
Просмотреть, как выглядит верстка при ширине "481px"?речь о мобильном устройстве?
на обычном компе не обязательно распахивать окно на весь экран.

Т.е, банально мышкой меняем ширину браузера?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.12.2015, 22:00
    #39131350
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Каков принцип верстки на разные устройства?
vladka63Смотрю разъяснения по поводу @media screen

А как, интересно, имея собственный экран, пусть шириной "1450px"
Просмотреть, как выглядит верстка при ширине "481px"?изменить размер окна браузера,
в настройках у браузеров должно быть что-то типа "отображать размеры страниц",

не забывайте про авто-поворот экрана на мобильных

Код: javascript
1.
2.
3.
if(typeof(window.onorientationchange)=='object') {
  // задать обработчик orientationchange
}


но это уже по-желанию, потому что придётся добавлять стили поверх других, затем отменять.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.12.2015, 22:02
    #39131351
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Каков принцип верстки на разные устройства?
только @media работает от размера экрана, а не окна браузера

и после поворота экрана стили сами не поменяются, только при обновлении страницы,
поэтому можно добавлять/отменять стили из JS
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.12.2015, 22:03
    #39131353
vladka63
vladka63
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Каков принцип верстки на разные устройства?
бухалтер фантоцциvladka63Смотрю разъяснения по поводу @media screen

А как, интересно, имея собственный экран, пусть шириной "1450px"
Просмотреть, как выглядит верстка при ширине "481px"?изменить размер окна браузера,
в настройках у браузеров должно быть что-то типа "отображать размеры страниц",

не забывайте про авто-поворот экрана на мобильных

Код: javascript
1.
2.
3.
if(typeof(window.onorientationchange)=='object') {
  // задать обработчик orientationchange
}


но это уже по-желанию, потому что придётся добавлять стили поверх других, затем отменять.

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

- что такое авто-повтор? Он что делает? - не забывайте про авто-поворот экрана на мобильных
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.12.2015, 22:04
    #39131357
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Каков принцип верстки на разные устройства?
у мобильных браузеры могут принудительно выдавать ширину экрана 603px или 962px (если не ошибаюсь), и другие значения, независимо от реального разрешения.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.12.2015, 22:05
    #39131360
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Каков принцип верстки на разные устройства?
vladka63,

никогда не поворачивали планшет или смартфон с веб-страничкой на 90 градусов?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.12.2015, 22:06
    #39131361
vladka63
vladka63
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Каков принцип верстки на разные устройства?
бухалтер фантоцциу мобильных браузеры могут принудительно выдавать ширину экрана 603px или 962px (если не ошибаюсь), и другие значения, независимо от реального разрешения.

Примерно понятно..
Просматривать верстку на разной ширине при помощи изменения масштаба отображения
а если не ставить авто-повтор, то обновлять страницу
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.12.2015, 22:07
    #39131363
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Каков принцип верстки на разные устройства?
vladka63,

не авто-повтор, а авто-поворот, смена ориентации экрана альбомная-книжная.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.12.2015, 22:07
    #39131364
miksoft
miksoft
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Каков принцип верстки на разные устройства?
vladka63miksoftпропущено...
речь о мобильном устройстве?
на обычном компе не обязательно распахивать окно на весь экран.

Т.е, банально мышкой меняем ширину браузера?Можно банально.
А можно и не банально. Например, у Firefox в меню Разработка есть Адапативный дизайн. Там можно выставить размер страницы как мышью, так и конкретными цифрами. А так же сделать "тач" и скришот.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.12.2015, 22:08
    #39131365
vladka63
vladka63
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Каков принцип верстки на разные устройства?
бухалтер фантоцциvladka63,

не авто-повтор, а авто-поворот, смена ориентации экрана альбомная-книжная.


Извините :) )) Утомление :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.12.2015, 22:08
    #39131367
vladka63
vladka63
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Каков принцип верстки на разные устройства?
miksoftvladka63пропущено...


Т.е, банально мышкой меняем ширину браузера?Можно банально.
А можно и не банально. Например, у Firefox в меню Разработка есть Адапативный дизайн. Там можно выставить размер страницы как мышью, так и конкретными цифрами. А так же сделать "тач" и скришот.

Ясно, спасибо.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.12.2015, 22:21
    #39131377
бухалтер фантоцци
бухалтер фантоцци
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Каков принцип верстки на разные устройства?
P.S. Google любит viewport и @media screen и учитывает их наличие при ранжировании в поисковой выдаче.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.12.2015, 23:24
    #39131403
devurandom
devurandom
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Каков принцип верстки на разные устройства?
vladka63,

Firefox ---> Ctrl + Shift + m

Chromium ---> Ctrl + j ---> Ctrl + Shift + m
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
20.12.2015, 12:45
    #39132521
st_st
st_st
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Каков принцип верстки на разные устройства?
vladka63Подскажите пожалуйста..

Сайт может быть просматриваем на разных устройствах.
Понятно, что на экране компьютера он более наполнен разными элементами (дизайнерскими).
А каков принцип верстки, когда часть элементов видных на экране компьютера - не должны быть показаны при просмотре, например, на "телефоне"?
Как их "прятать"?

Спасибо.

Для изменения стилей на разных экранах используется "css media queries". Расположение элементов тестировать можно просто в браузере, изменяя его размеры. Основное тестирование - только на смартфонах/планшетах. У каждого устройства свои размеры экранов (например у Iphone 5 разрешение экрана 640px, а реальный его размер 320px), поэтому привязывается к каким-то конкретным размерам смысла нет, взять минимальный к примеру 300px-320px и пошёл перестраивать до 1920px. И не насиловать смартфоны попапами, самодельными выпадающими списками на основе <select> и прочей глючащей в смартфонах ерундой.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
20.12.2015, 13:40
    #39132532
miksoft
miksoft
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Каков принцип верстки на разные устройства?
st_stОсновное тестирование - только на смартфонах/планшетах.Как недавно потерпевший, прошу так же не забывать и про печать. А то видел недавно сайт, где было чудовищное количество css media queries (при том, что страница очень простая и контента на ней очень мало), но они все относились к экранам. А на печать лезет мусор. В итоге пришлось делать скриншот страницы и печатать его.

Для всех страниц, конечно, печать проверять не надо. Надо для тех, которые пользователь может захотеть показать другому человеку или взять с собой в дорогу. Например, контакты, список заказа, карточка товара и т.п.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
21.12.2015, 11:15
    #39132859
Antonariy
Antonariy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Каков принцип верстки на разные устройства?
бухалтер фантоццитолько @media работает от размера экрана, а не окна браузера@media screen работает от размера экрана, а просто @media (min-width: 768px), например, работает от окна браузера.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.12.2015, 02:53
    #39134018
vladka63
vladka63
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Каков принцип верстки на разные устройства?
Сижу, учусь :)
Возник вопрос: а можно как-то ограничить изменение размера шрифта?

Например, "смотрю" как работает измерение vw, задаю @media screen и получаю, что шрифт меняется на всем заданном интервале ширины экрана, а хотелось бы что-бы в конце минимума/максимума ширины экрана размер шрифта не менялся.
Например:
задаю диапазон размера экрана 1000 - 1300
при уменьшении в сторону 1000, начиная с 1050 - шрифт не меняется.
при увеличении в сторону 1300, начиная с 1250 - шрифт не меняется.
Числа приведены для разъяснения вопроса.

Спасибо :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Каков принцип верстки на разные устройства? / 22 сообщений из 22, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 520ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1445528]:
 0ms
get settings:
 9ms
get forum list:
 20ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 158ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 70ms
get tp. blocked users:
 2ms
others: 237ms
total:  520ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]