Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия |
software:development:web:docs:learn:css:css_layout:responsive_design [2023/09/06 20:01] – [Flexbox] vladpolskiy | software:development:web:docs:learn:css:css_layout:responsive_design [2023/09/06 20:29] (текущий) – [Использование единиц просмотра для адаптивной типографики] vladpolskiy |
---|
} | } |
</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> |
| |
| |
{{: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> |
| |
| |
Это означает, что нам нужно указать размер шрифта для заголовка только один раз, а не настраивать его для мобильных устройств и переопределять в медиа-запросах. Затем шрифт постепенно увеличивается по мере увеличения размера области просмотра. | Это означает, что нам нужно указать размер шрифта для заголовка только один раз, а не настраивать его для мобильных устройств и переопределять в медиа-запросах. Затем шрифт постепенно увеличивается по мере увеличения размера области просмотра. |
| |
| <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> |
| |