html - 在 PX 和百分位之间选择

Question

我是 BootStrap 的新手，我有以下问题。

1. 建议在 bootstrap 中使用 px 和百分位数的方法是什么？
2. 如果我使用 PX，对网站浏览量会有什么影响吗？

Answer 1

像素单位和百分位数单位之间存在相当大的差异。根据定义，百分位数是基于容器大小的可变维度，而以像素为单位声明的大小将始终占用给定的像素数。

你需要根据你想要完成的事情来选择:

• 是否需要渲染大小始终为固定像素数？然后选择像素(或另一个固定单位)(这不是响应)
• 您是否希望呈现的大小根据容器的尺寸而变化？然后选择百分位数

了解差异的最佳方法是对两者进行试验。并更改浏览器窗口的大小。

<div style="width: 80%; border: 2px solid #000; height: 30px">
  <span>80% WIDE DIV</span>
</div>
  
<div style="width: 40%; border: 1px solid #00F; height: 30px; float: left;">
  <span>60% WIDE DIV</span>
</div>
<div style="width: 40%; border: 1px solid #F00; height: 30px; float: left;">
  <span>40% WIDE DIV</span>
</div>  
<div style="clear:both; margin-bottom: 20px;"></div>

<p>FIXED LAYOUT</p>
<div style="width: 300px; border: 2px solid #000; height: 30px">
  <span>300px WIDE DIV</span>
</div>
  
<div style="width: 160px; border: 1px solid #00F; height: 30px; float: left;">
  <span>160px WIDE DIV</span>
</div>
<div style="width: 140px; border: 1px solid #F00; height: 30px; float: left;">
  <span>140px WIDE DIV</span>
</div>  
<div style="clear:both;"></div>