ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Каков принцип верстки на разные устройства?
22 сообщений из 22, страница 1 из 1
Каков принцип верстки на разные устройства?
    #39131251
vladka63
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vladka63
Участник
Подскажите пожалуйста..

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

Спасибо.
...
Рейтинг: 0 / 0
17.12.2015, 19:47
| Ответить | Цитировать | Написать  
Каков принцип верстки на разные устройства?
    #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, 20:04
| Ответить | Цитировать | Написать  
Каков принцип верстки на разные устройства?
    #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:26
| Ответить | Цитировать | Написать  
Каков принцип верстки на разные устройства?
    #39131332
vladka63
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vladka63
Участник
Смотрю разъяснения по поводу @media screen

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

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

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

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

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


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

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

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

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

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

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

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

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


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


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

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

Firefox ---> Ctrl + Shift + m

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

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

Спасибо.

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

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

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

Спасибо :)
...
Рейтинг: 0 / 0
22.12.2015, 02:53
| Ответить | Цитировать | Написать  
22 сообщений из 22, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Каков принцип верстки на разные устройства?
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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