fortm fortm - 11 months ago 50
CSS Question

Using pixel widths in responsive css

I find sites responsive even with widths specified in pixels.

Is this bad practice to use widths in pixels in place of percentages when writing responsive
CSS for web as well as mobile ?

So I was looking for some rule here when can we use pixels as width and when percentage.


Proper responsive design usually requires the use of pixels (or some other unit of measurement like em,rem,vw, etc.) as well as percentages and media queries. Most responsive design frameworks like Twitter's Bootstrap still use pixels for their media queries :

/* Example of a Bootstrap Media Query */
@media (min-width: 1200px) {
  .visible-lg-block {
    display: block !important;
@media (min-width: 1200px) {
  .container {
    width: 1170px;

And handle some of their responsive utility classes rely with percentages and the use of margins/padding :

/* Example of Bootstrap's Responsive Column Classes */
.col-xs-1, ... .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
.col-xs-12 {
  width: 100%;
.col-xs-11 {
  width: 91.66666667%;
.col-xs-10 {
  width: 83.33333333%;

So there isn't a hard/fast rule on which to use. Certain scenarios might require percentages, others might want to define an exact size. If you want to do responsive design properly, you'll need to use the best tool available, which may be percentages or it may be pixels.