5 CSS practical tips for responsive design

As I said in my three-step tutorial, responsive web design, responsive web design is not difficult, but it's tricky to get elements to smooth transitions when layout switches. Now I share the five CSS techniques I used to encode and illustrate them. These techniques use simple CSS properties such as Min-width, max-width, overflow, and relative property values, but these properties play a big role in responsive design.

1. Responsive Video (Demo)

The CSS technique of responsive video was discovered by Tjkdesign.com. One of my previous articles introduced it and you can read it here. Responsive video adapts to its container width.

. video {Position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}. Video iframe,  . Video object,  . Video embed {position:absolute;top:0;left:0;width:100%;height:100%;}

　　

2. Min & Max Width (Demo)

property sets the maximum width of the element. Its purpose is to prevent the element from "cross-line".

Maximum width container

In the following example, I defined the width of the container as 800px (if its parent container is not less than 800px), but not more than 90% of the parent container (if its parent container is less than 800px).

. container {width:800px;max-width:90%;}

　　

Responsive picture

With max-width:100% and Height:auto, the picture adapts to the width of the parent container.

img {max-width:100%;height:auto;}

The above CSS works in both IE7 and IE9, but IE8 is not recognized. You can use Width:auto to fix it. You can use the conditional CSS for IE8, or use the following IE hack:

@media screen {  img {   width:auto;/* for IE 8 */  }}

　　

Min-width

Instead, it sets the minimum width of the element. In the example below, Min-width is used to define the width of input, preventing input from becoming too small when stretched.

3. Relative Value (Demo)

In a responsive design, using relative values can simplify CSS and improve layout. The following examples illustrate.

Relative margin

The following example is a list of comments, set using relative margin. I use the percent value instead of the absolute pixel value to separate the sub-list. As you can see below, if you define in pixels, the sub-list becomes smaller.

Relative font size

fonts, line heights, and margins that are set in relative values (such as EM or%) can be inherited. For example, if you simply change the font size of a parent element, the font size of its child elements can change as well.

Relative padding

The following illustration shows that the relative percent margin is better than the absolute fixed pixel margin. The container on the left represents an imbalance using pixel margins. The container on the right shows the full use of the container space.

4. Overflow:hidden Skills (Demo)

As I said in the previous article, you can use the overflow property to clear the float. This technique is very practical. Applying Overflow:hidden, you can clear floats on the previous element to ensure that the contents of the current container are displayed properly.

5. Word-break (Demo)

I've said it before. Word-wrap property. You can wrap a long text (such as a long URL link) in force.

. break-word {Word-wrap:break-word;}

　　

5 CSS practical tips for responsive design