H3XED

How To Create A Responsive Website Without Media Queries

Jun 27, 2014   Web Development   Nick Vogt   Comments
Please note that this post is over a year old and may contain outdated information.
You can create a responsive website using only basic HTML and CSS (no media queries, CSS3, or JavaScript). It can't be too complex, but you can get along just fine for a simple website like a blog or portfolio.

The advantage to doing this is that you'll have better browser compatibility and cleaner CSS. Your CSS may also be easier to maintain and understand, since you won't have media queries changing things at different widths.

Here are some techniques that will help you accomplish a responsive website without media queries:


Percentage Padding and Margins


Use a percentage for the padding and margin of elements. This can give nice comfortable spacing on desktop, which tightens up nicely on mobile (and looks good at every width in between).

.content {
    padding: 15px 3%;
}


Floats


Floating fixed width elements will cause them to automatically wrap as the browser width shrinks (just make sure they're the same height or they may wrap oddly).

.post {
    float: left;
    width: 100px;
    height: 80px;
}


Max-width


Use a max-width to prevent your content from being too wide, but still allow it to shrink down with the browser width.

.content {
    width: 100%;
    max-width: 900px;
}


Percentage Width


Use a percentage width on elements so they take up less room as the browser shrinks. You can combine it with a max-width so the element is never too large.

.search {
    width: 55%;
    max-width: 240px;
}
Share This Post
Twitter

Comments (0)

Share This Post
Twitter
H3XED © Nick Vogt   RSS   Policies   Twitter