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:56] – [Гибкие сетки] vladpolskiysoftware:development:web:docs:learn:css:css_layout:responsive_design [2023/09/06 20:29] (текущий) – [Использование единиц просмотра для адаптивной типографики] vladpolskiy
    Строка 124: Строка 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>
    Строка 130: Строка 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>
      
    Строка 149: Строка 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>
      
    Строка 201: Строка 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>
      
    Строка 230: Строка 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.1694019387.txt.gz · Последнее изменение: 2023/09/06 19:56 — vladpolskiy