When using pixels makes sense

Max-width


I find it best to stick to using pixels values for max-width. In my experience if you use percent values for this, browser can to do weird things and if you want it to be a percent just use the width property. If you want it the max-width to be 50%, just set the not just set the width to 50%.

Another thing I have found when you using max-width you need to set the width to 100% or else sometimes it won’t be. Oddly if you set the width to something other then 100% it will not be the proper width for which you set it. (This could just be a bug). This means you cannot set padding or margin (at least for left or right) on a element you set max-width to. If you do it will give you a total width of more then 100% which is not usually what you want.

Example using max-width

div. container {
    max-width: 1000px;
    width: 100%;
}

Max-width and min-width in media-queries (sometimes)


This one is tricky because if you use relative unit for almost everything else why not use em on media queries too. You can use and both em and pixels, they both work here. I feel this one is heavily dependent on your website and your needs.

Personally I tend to lean towards pixels here, not to target specific devices per say but I keep the devices sizes in mind when setting these. I try to have the “Tablet” or “Mobile” layout target as many tablets/smartphones as possible. However if your content needs a layout adjustment make a new media-queries and change it.

Border


Most often you will want only want a few pixels for a border. While you could use em or percents these will cause the amount to change to drastically while depending on the users setting and device.

Essentially if you only need a few pixels for a border I find it best to use pixels.

However if the border is much larger then that I would suggest using percents or em because the element with the border will most likely have a larger impact on layout and could break your layout if you used pixles

Box-Shadow and text-shadow


Again for mostly the same reasons as on borders. If you only need a few pixels it will be much easier on you to use pixels.

Leave Your Feedback

Name is required.
Email is required.
URL is required.
Message is required.