зачем использовать процентное значение для ширины div в css?

<p>я читаю статьи о css. я обнаружил, что многие из авторов предлагают использовать% value для ширины или высоты div.</p><p>я использую пиксели все время.</p><p>почему я должен использовать значение% для ширины или высоты div вместо пикселей?</p><p>каковы преимущества?</p>

<p>мне лично не нравятся веб-сайты, которые имеют ширину в% для основной области контента из-за несоответствия. лучше всего использовать ширину около 1000 пикселей, может быть немного меньше, для всего сайта, чтобы он работал для всех разрешений.</p><p>что касается элементов внутри основной области содержимого, я склонен использовать процентную ширину, потому что я не очень хочу вычислять точные значения пикселей. в любом случае, результат получился неизменным, потому что процентное значение является постоянным, в отличие от разрешения монитора, которое зависит от пользователя. </p><p>подводя итог: используйте проценты только тогда, когда каждый пользователь получит одинаковый результат из-за того, что родительский элемент имеет фиксированную (пиксельную) ширину. в противном случае в вашем дизайне могут возникнуть несоответствия, из-за чего вы не сможете использовать яркие изображения, и сайт может показаться уродливым пользователям с гигантскими/крошечными мониторами. если вы собираетесь использовать процентную ширину, вам просто нужно протестировать сайт с разными разрешениями!</p>

<p>сохраните следующий html-файл в файл и откройте его в своем веб-браузере . теперь измените размер окна веб-браузера, обратите внимание, что процент будет увеличиваться и сокращаться, а пиксели - нет.</p><pre><code><!doctype html> <html> <head> <title>pixels and percents</title> <style> html,body { margin:0; width:100%; height:100%; background:blue; } .pixels { width:100px; height:20px; background:green; } .percent { width:50%; height:50%; background:red; } </style> <head> <body> <div class="pixels"> pixels </div> <div class="percent"> percent </div> </body> </html> </code></pre>

<p>я нахожу веб-сайты, которые не умещаются на экране, либо оставляя пустое пространство (которое может быть значительным) по краю содержимого, либо падая с боковой стороны полосы прокрутки (или, что еще хуже, падая с боковой стороны без прокрутки! ) сильно раздражает.</p><p>я пишу свои страницы по размеру экрана, независимо от размера экрана.</p>

<p>непонятно, на какой контекст вы ссылаетесь (на какие элементы). тем не менее, вы должны быть осторожны при использовании пикселей для размеров шрифта.</p><p>я обычно использую пиксели для div, чтобы сохранить мой макет, как и ожидалось. но я избегаю пикселей для шрифтов. разные пользователи могут захотеть шрифт разных размеров. зачем убирать это?.</p>

<p>преимущество использования% состоит в том, что вы можете использовать все 100% пользовательского интерфейса и получить лучший опыт без каких-либо ограничений.</p>

<p>потому что, если потоки контента в процентах облегчают реализацию адаптивного сайта (проще = (меньше (время = деньги))). </p><p>отбросьте соответствующие поплавки, разберитесь в меню и прочем после того, как добавите некоторые медиа-запросы, и у вас будет сайт, работающий на разных разрешениях и устройствах.</p><p>я использую жидкостную сетку, используя проценты и ems для размеров текста. с пикселями легче работать, но не с точки зрения отзывчивости. я упаковываю свой размер в контейнер максимальной ширины. </p><p>ps</p><p>помните, что все сводится к пикселям в конце. </p>

<p>в целом, если вы используете изображения на своем сайте, использование процента для основного значения может быть не лучшим подходом. в этом случае вы хотели бы использовать пиксели.</p><p>совет: используйте пиксели для основного константы и проценты для контента. </p>