Shulou(Shulou.com)06/01 Report--

This article mainly explains the "CSS response video method", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "CSS response video method" bar!

1. Response video

The trick of responding to video CSS was discovered in tjkdesign.com, which enables the video to be embedded and extended from the full width to the boundary.

.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. Minimum and maximum width

You can set the maximum width of an element to prevent it from crossing the boundary.

Contributed by smart society, communication plus button skirt: 533319658

Maximum width of 

In the following example, we use an 800 px container that does not exceed 90% of the boundary width.

.container {

Width: 800px

Max-width: 90%

}

 responsive picture

You can set the maximum width: 100%, height: by default, automatically adjust the maximum width boundary of the image.

Img {

Max-width: 100%

Height: auto

}

The above response image only works in CSS IE7 and IE9, but does not work in IE8. To use it, you need to set the width: automatic, or you can apply for a special CSS condition for IE8, or use the following IE hack:

@ media screen {

Img {

Width: auto; / * for ie 8 * /

}

}

Minimum width of 

The minimum width and the maximum width are relative, and in the following example, the minimum width is used to prevent the input value from being very small proportionally when entering a text field.

3. Relative value

In response design, knowing when to use relative values can simplify CSS and maximize layout results. Here are some examples.

 relative margin

The following is an example of commentlist, which is set aside for comments relative to the left margin, and sets a sublist with a percentage value. As shown in the screen capture on the left, the list of content boxes becomes very small.

 relative font

Relative values (such as em or%), font size, line height, and margins can be adjusted, for example, you can simply change the font size for all child elements in the parent element.

 relative proportional filling

The screenshot below shows that it is best to use a relative proportional fill rather than a fixed pixel fill. The left border shows the unbalanced filled space caused by pixel filling, and the right border fill ratio shows the maximization of the content area.

4. Overflow: hidden skills

This technique is very useful to clear floats from the previous elements and keep the contents of the collection running through Overflow:hidden.

5 、 word-break

That is, the auto-wrap property, which can be wrapped with unbreaking text (such as long URL text) instead of running on one line.

. break-word {

Word-wrap: break-word

}

Thank you for reading, the above is the content of "CSS response video method", after the study of this article, I believe you have a deeper understanding of the method of CSS response video, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.