book51.ru

Инструменты пользователя

Инструменты сайта

  • Показать страницу
  • История страницы
  • Ссылки сюда
  • Оставить на чай
  • Экспорт в PDF
  • Наверх
    • Вы посетили:
    software:development:web:docs:learn:css:css_layout:responsive_design

    Различия

    Показаны различия между двумя версиями страницы.

    Ссылка на это сравнение

    Предыдущая версия справа и слеваПредыдущая версия
    Следующая версия    		Предыдущая версия
    software:development:web:docs:learn:css:css_layout:responsive_design [2023/09/06 19:26] – [Исторические макеты сайтов] vladpolskiysoftware:development:web:docs:learn:css:css_layout:responsive_design [2023/09/06 20:29] (текущий) – [Использование единиц просмотра для адаптивной типографики] vladpolskiy
    Строка 22: Строка 22:
     </WRAP> </WRAP>
     Сайт с фиксированной шириной рисковал иметь горизонтальную полосу прокрутки на экранах меньших чем ширина сайта (как видно ниже) и много белого пространства на краях дизайна на больших экранах. Сайт с фиксированной шириной рисковал иметь горизонтальную полосу прокрутки на экранах меньших чем ширина сайта (как видно ниже) и много белого пространства на краях дизайна на больших экранах.
     +<html>
     +<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/css-examples/fixed-width.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
     +</iframe>
     +</html>
     +
     <WRAP left round box 100%> <WRAP left round box 100%>
    -:!: **Примечание:** Посмотрите этот простой макет с фиксированной шириной: [[https://mdn.github.io/css-examples/learn/rwd/fixed-width.html|пример]], [[https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html|исходный код]]. Снова изучите результат по мере изменения размера окна браузера.+:!: **Примечание:** Посмотрите этот простой макет с фиксированной шириной: <html><a href="./demo/code-docs/pages/css-examples/fixed-width.html">пример</a></html>, [[https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html|исходный код]]. Снова изучите результат по мере изменения размера окна браузера.
     </WRAP> </WRAP>
     <WRAP left round box 100%> <WRAP left round box 100%>
    Строка 86: Строка 91:
     Этот подход сегодня можно найти во многих местах в Интернете и он задокументирован здесь в разделе макетов в нашей статье [[software:development:web:docs:Learn:CSS:CSS_layout:Legacy_Layout_Methods|устаревших методов макетов]]. В вашей работе вероятно, что вы столкнётесь с веб-сайтами, использующими этот подход, поэтому стоит понимать его, даже если вы не будете строить современные сайты используя гибкие сетки основанные на float. Этот подход сегодня можно найти во многих местах в Интернете и он задокументирован здесь в разделе макетов в нашей статье [[software:development:web:docs:Learn:CSS:CSS_layout:Legacy_Layout_Methods|устаревших методов макетов]]. В вашей работе вероятно, что вы столкнётесь с веб-сайтами, использующими этот подход, поэтому стоит понимать его, даже если вы не будете строить современные сайты используя гибкие сетки основанные на float.
      
    -Следующий пример демонстрирует простой отзывчивый дизайн, с использованием медиавыражений и гибких сеток. На узких экранах макет отображает блоки, расположенные друг над другом:+Следующий пример демонстрирует простой отзывчивый дизайн, с использованием медиавыражений и гибких сеток. На узких экранах макет отображает блоки, расположенные друг над другом. На более широких экранах они перемещаются в два столбца: 
     + 
     +<html> 
     +<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/css-examples/float-based-rwd.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> 
     +</iframe> 
     +</html>
      
     <WRAP left round box 100%> <WRAP left round box 100%>
    -:!: **Примечание:** вы можете найти [[https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html|живой пример]] и [[https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html|исходный код]] этого примера на GitHub.+:!: **Примечание:** вы можете найти <html><a href="./demo/code-docs/pages/css-examples/float-based-rwd.html">пример</a></html> и [[https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html|исходный код]] этого примера на GitHub.
     </WRAP> </WRAP>
     =====Современные технологии макетов===== =====Современные технологии макетов=====
    Строка 114: Строка 124:
     В Flexbox, в качестве исходного поведения, flex элементы будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере. Изменяя значения ''flex-grow'' и ''flex-shrink'' вы можете указать, как вы хотите, чтобы предметы вели себя когда они сталкиваются с большим или меньшим пространством вокруг себя. В Flexbox, в качестве исходного поведения, flex элементы будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере. Изменяя значения ''flex-grow'' и ''flex-shrink'' вы можете указать, как вы хотите, чтобы предметы вели себя когда они сталкиваются с большим или меньшим пространством вокруг себя.
      
    -В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись ''flex: 1'' как описано в главе [[[[software:development:web:docs:Learn:CSS:CSS_layout:Flexbox#flexible_sizing_of_flex_items|Flexbox: Гибкое изменение размеров flex элементов]]|Flexbox: Гибкое изменение размеров flex элементов]].+В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись ''flex: 1'' как описано в главе [[software:development:web:docs:Learn:CSS:CSS_layout:Flexbox#flexible_sizing_of_flex_items|Flexbox: Гибкое изменение размеров flex элементов]].
      
     <code css CSS> <code css CSS>
    Строка 120: Строка 130:
       display: flex;   display: flex;
     } }
    - 
     .item { .item {
       flex: 1;   flex: 1;
     } }
     </code> </code>
     +
     +<html>
     +<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/css-examples/flex-based-rwd.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
     +</iframe>
     +</html>
      
     <WRAP left round box 100%> <WRAP left round box 100%>
    -:!: **Примечание:** В качестве примера мы перестроили простой отзывчивый макет выше, в этот раз используя flexbox. Вы видите что нас больше не надо использовать странные процентные значения для подсчёта размера столбцов: [[https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html|пример]], [[https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html|исходный код]].+:!: **Примечание:** В качестве примера мы перестроили простой отзывчивый макет выше, в этот раз используя flexbox. Вы видите что нас больше не надо использовать странные процентные значения для подсчёта размера столбцов: <html><a href="./demo/code-docs/pages/css-examples/flex-based-rwd.html">пример</a></html>, [[https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html|исходный код]].
     </WRAP> </WRAP>
      
    Строка 139: Строка 153:
     } }
     </code> </code>
     +
     +<html>
     +<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/css-examples/grid-based-rwd.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
     +</iframe>
     +</html>
      
     <WRAP left round box 100%> <WRAP left round box 100%>
    -:!: **Примечание:** версия grid макета ещё проще, поскольку мы можем определить столбцы в .wrapper: [[https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html|пример]], [[https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html|исходный код]].+:!: **Примечание:** версия grid макета ещё проще, поскольку мы можем определить столбцы в .wrapper: <html><a href="./demo/code-docs/pages/css-examples/grid-based-rwd.html">пример</a></html>, [[https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html|исходный код]].
     </WRAP> </WRAP>
      
    Строка 191: Строка 210:
      
     {{:software:development:web:docs:learn:css:css_layout:responsive_design_7.png?|}} {{:software:development:web:docs:learn:css:css_layout:responsive_design_7.png?|}}
     +
     +<html>
     +<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/css-examples/type-rwd.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
     +</iframe>
     +</html>
      
     <WRAP left round box 100%> <WRAP left round box 100%>
    -:!: **Примечание:** смотрите этот пример в действии: [[https://mdn.github.io/css-examples/learn/rwd/type-rwd.html|пример]], [[https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html|исходный код]].+:!: **Примечание:** смотрите этот пример в действии: <html><a href="./demo/code-docs/pages/css-examples/type-rwd.html">пример</a></html>, [[https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html|исходный код]].
     </WRAP> </WRAP>
      
    Строка 220: Строка 244:
      
     Это означает, что нам нужно указать размер шрифта для заголовка только один раз, а не настраивать его для мобильных устройств и переопределять в медиа-запросах. Затем шрифт постепенно увеличивается по мере увеличения размера области просмотра. Это означает, что нам нужно указать размер шрифта для заголовка только один раз, а не настраивать его для мобильных устройств и переопределять в медиа-запросах. Затем шрифт постепенно увеличивается по мере увеличения размера области просмотра.
     +
     +<html>
     +<iframe height="350" style="width: 100%;" scrolling="no" title="Untitled" src="./demo/code-docs/pages/css-examples/type-vw.html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
     +</iframe>
     +</html>
      
     <WRAP left round box 100%> <WRAP left round box 100%>
    -:!: **Примечание:** смотрите этот пример в действии: [[https://mdn.github.io/css-examples/learn/rwd/type-vw.html|пример]], [[https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html|исходный код]].+:!: **Примечание:** смотрите этот пример в действии: <html><a href="./demo/code-docs/pages/css-examples/type-vw.html">пример</a></html>, [[https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html|исходный код]].
     </WRAP> </WRAP>
      
    software/development/web/docs/learn/css/css_layout/responsive_design.1694017619.txt.gz · Последнее изменение: 2023/09/06 19:26 — vladpolskiy