Автор |
Сообщение |
Shnap Эксперт |
|
Сделал сайт http://hvvb.ru (модератор, не сочти за рекламу плз)
Я только учусь, опыта в создании сайтов нету почти.
Почему не работает функция Ctrl+колёсико на win? А на сафари работает но наполовину, масштабируется только текст но не картинки..
Как сделать чтоб работало, помогите плз...
Сейчас в каждом диве установлен фон-картинка с шириной 100% экрана..
Как сделать чтоб по нажатию Ctrl+колёсико сайт уменьшался? как на https://www.apple.com/ или https://www.samsung.com/ чтоб картинка тоже уменьшалась а по бокам оставались две белые полоски. |
|
|
|
|
Sergaffan Гуру |
|
Не по теме:
Шрифт просто ад. Очень сложно читать и воспринимать прочитанное. |
|
|
|
|
POZITIF Продвинутый форумчанин |
|
Замена ступечного подшипника .......... 2800р
"ступица "
инвалид - пенсионер, наклеивший наклейку, а также заполнивший онлайн-заявку и озвучивший hvs получит скидку 90% ?
и почему привязка масштаба к окну ? |
|
|
|
|
ATX555 Гуру |
|
Shnap писал(а): |
Почему не работает функция Ctrl+колёсико на win? |
Может из-за использования относительных единиц в main.css?
Просто посмотрел сайты, где это вообще никак не задавалась и создавались они до введения этого - всё масштабируется, т.е. для этого ничего дополнительно делать ненадо.
А вот, чтоб не масштабировалось - надо, например, привязать пропорции к экрану (окну). |
|
|
|
|
nethello Гуру |
|
В браузере SRWare Iron вообще ничего не меняется, только указывает процент от 25 до 500, а сайт так и остаётся неподвижен |
|
|
|
|
ДобрыйФей Мечтатель Предупреждений : 5
|
|
|
|
|
Shnap Эксперт |
|
Sergaffan писал(а): |
Не по теме:
Шрифт просто ад. Очень сложно читать и воспринимать прочитанное. |
Шрифт типа гаечный ключ, шестигранник типа))
POZITIF писал(а): |
Замена ступечного подшипника .......... 2800р
"ступица "
инвалид - пенсионер, наклеивший наклейку, а также заполнивший онлайн-заявку и озвучивший hvs получит скидку 90% ?
и почему привязка масштаба к окну ? |
За ошибку спасибо.
Да, получит скидку 90%. Мы социально ориентированны)
Привязка к окну чтоб сделать резиновость, от большого монитора до маленького экрана смартфона. И чтоб не писать кучу кода для каждого разрешения экрана. Опыта у меня не много в этом. На данном сайте тренируюсь, довожу его до совершенства с нуля)
ATX555
ДобрыйФей
Я понял.. Ну а если например весь сайт заключить в див и то что внутри дива будет работать с vw, vh. А сам этот огромный див никак ни к чему не будет привязан.. Вообще если честно я не особо понимаю что значит "привязать пропорции к экрану" типа по ширине? Ну эт чтоб если экран меньше чем разрешение картинки фона, чтоб она уменьшилась, такая у меня логика была)
Хочется сделать как на самсунг.ком, уменьшаешь масштаб и по бокам появляются свободные белые поля.
Но я смотрю код и реально не врубаюсь, там куча скриптов и непонятных мне вещей. Хочется реализовать это как можно проще.
|
|
|
|
|
ATX555 Гуру |
|
Shnap писал(а): |
Хочется сделать как на самсунг.ком, уменьшаешь масштаб и по бокам появляются свободные белые поля. |
Если именно, как на Самсунге, то задаётся ширина этой центральной части в 1200-1280 пикселов (при увеличении масштаба сайт Cамсунга вылезает за эти размеры) с расположением посередине страницы, а ширина всей страницы - 100%.
Т.е. на широких мониторах как раз будут появляться эти самые поля по бокам.
Высоту не задавать - сама будет меняться пропорционально и прокручиваться, если не влезает.
Если какие ещё детали - надо читать спецификации по новым css, что там и как. |
|
|
|
|
ДобрыйФей Мечтатель Предупреждений : 5
|
|
Основной контейнер с фоновым изображением делается в единицах относительно вьюпорта или процентах, контент находится во вложенном контейнере, выровненный по центру и с шириной в пикселях. |
|
|
|
|
Shnap Эксперт |
|
ATX555
ДобрыйФей
Ага, немного прояснилось, спасибо) |
|
|
|
|
Shnap Эксперт |
|
ATX555
ДобрыйФей
Чот не пойму опять (( Если я задаю ширину контейнера в пикселях, например 1280, то когда ширина окна или монитора меньше чем 1280, то контейнер вылазит за границу окна, что не есть гуд.. CTRL да, при этом работает.. Но хочется сделать так чтоб при любой ширине окна сайт был "на всё окно" как собственно сейчас и сделано.. Он полностью масштабируется от ширины окна, и даже размер шрифта меняется плавно)
Просто к этому нужно добавить ещё чтоб работал ctrl+колесико.. Чтоб как на samsung.com
Чтоб вместе работало и привязка к ширине окна и масштабирование.. |
|
|
|
|
ДобрыйФей Мечтатель Предупреждений : 5
|
|
Примерно такой эффект тебе нужен?Нажмите сюда, чтобы просмотреть текст
Код: |
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
html, body, p {
margin: 0;
box-sizing: border-box;
}
#content {
background: #fff;
height: 100%;
max-width: 300px;
margin: 0 auto;
}
#container {
background: #000;
height: 100vh;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Content</p>
</div>
</div>
</body>
</html> |
|
Во-первых, если бы ты открыл для себя панель веб-разработчика в браузере, то мог бы сам изучить верстку на приведенных выше сайтах. Там я нигде ни процентов, ни единиц вьюпорта не увидел, а ширина чаще всего вообще не указана - просто auto. У меня в примере так же.
Во-вторых, CSS одним свойством width не ограничивается. Смотри пример.
В-третьих, проценты, vw и vh не масштабируются.
В-четвертых, сядь уже и изучи документацию. |
|
|
|
|
Shnap Эксперт |
|
ДобрыйФей
Ну да, типа того эффект нужен)
Нужно чтоб всё было как есть сейчас только чтоб впридачу ctrl+колесико заработало)
Насчет изучить документацию это ты конечно прав, но блин зачем тогда нужны форумы) Мы ж тут с 2008го года чувак)
Тоесть ты хочешь сказать что если проценты, vw и vh не масштабируются, то мне заново писать стили надо?) |
|
|
|
|
Shnap Эксперт |
|
ДобрыйФей
Вот глянь запись с экрана.
На смартфоне работает если двумя пальцами делать.
Хочу чтоб на компе точно так же было когда зажимаешь ctrl и крутишь колёсико)
По моим соображениям, без чтения документации , я понимаю что весь сайт нужно окутать одним большим дивом и к нему применить какую то функцию..(?) Типа чтоб внутри этого дива всё работало с vw и процентами, а снаружи появлялись полоски по бокам при масштабе меньше 100%) |
|
|
|
|
ДобрыйФей Мечтатель Предупреждений : 5
|
|
Shnap писал(а): |
Тоесть ты хочешь сказать что если проценты, vw и vh не масштабируются, то мне заново писать стили надо?) |
Да.
Элемент div, если ничего не крутить, по умолчанию имеет ширину auto и display block, по ширине он займет всего родителя, насколько это возможно с учетом отступов и границ. При этом auto масштабируется + можно задать мнимальную и максимальные пороги. Как раз такой подход на тех сайтах и используется.
Проценты, кстати, должны масшабироваться, если размер родительского элемента задан в пикселях. Т.е. будет масштабироваться родитель -> начнет масштабироваться и дочерний элемент с сохранением процентовки. |
|
|
|
|
Shnap Эксперт |
|
ДобрыйФей
Ну понял, понял... спасибо тебе. |
|
|
|
|
|