<p dir="auto">I just stumbled across this in <a href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">the minified version of Bootstrap 1.3.0</a>. On line 4 we have:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="ol,ul{list-style:none;}"><pre class="notranslate"><code class="notranslate">ol,ul{list-style:none;}
</code></pre></div>
<p dir="auto">and on line 88 we have:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="ul,ol{margin:0 0 18px 25px;}"><pre class="notranslate"><code class="notranslate">ul,ol{margin:0 0 18px 25px;}
</code></pre></div>
<p dir="auto">. Obviously they could be written as one rule:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="ul,ol{margin:0 0 18px 25px;list-style:none;}"><pre class="notranslate"><code class="notranslate">ul,ol{margin:0 0 18px 25px;list-style:none;}
</code></pre></div>
<p dir="auto">I'm not sure this is bug in less or wherever, but I guess you could save some bandwidth fixing this minor bug!</p>
<p dir="auto">I've noticed that Bootstrap doesn't change it font sizes between layouts.  Why is that?  For example, the H1 font size is 36px.  This seems fine on a desktop but is WAY too big on a mobile layout.  What was the reasoning behind not making the font sizes responsive?</p>
<p dir="auto">And if I wanted to make them responsive, is that easy to do without modifying the Bootstrap source?  It seems like I would have to rewrite a lot of code in my main.scss in my own media queries in order to do this.  A related part of the problem is that, for example, the H1, H2, H3, etc font sizes are defined as calculated pixels:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
$font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
$font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
$font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-h5:            $font-size-base !default;
$font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12px"><pre class="notranslate"><code class="notranslate">$font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
$font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
$font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
$font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-h5:            $font-size-base !default;
$font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12px
</code></pre></div>
<p dir="auto">If Bootstrap was using <code class="notranslate">rem</code>s then you could simply change the base font size in each media query and all headers (in this example) would automatically change size accordingly.</p>
<p dir="auto">Anyways, just trying to figure out the best approach here and also am wondering why in the world font sizes would not be setup to be responsive...</p>