5 extremely useful tricks when making Responsive Website
1. Responsive Video
The tjkdesign website has a detailed article about this trick, you can see here . This trick makes videos embedded in web pages wide open to both sides to close to two borders.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video iframe, .video object, .video embedded { position: absolute; top: 0; left: 0; width: 100%; height: 100% } |
2. Min Widht and Max Width
Max Width Container
The max-width attribute allows us to set the maximum width of the element, which prevents the element from inserting out of the required range.
1 2 3 4 | .container { width: 800px; max-width: 90%; } |
Responsive Image
We can make images on the web automatically adjust the size by the maximum width of the border by the following way:
1 2 3 4 | img { max-width: 100%; height: auto; } |
Min Width
The min-width attribute sets the smallest width of the element. In the following example, we use min-width for the input field so that the input width is too small
3. Relative Values (Relative Values)
When making Responsive website, if we know when to use relative value, it will minimize the CSS writing and display optimization of the website.
Relative Font Size
When we use em or% for font-size, line-height and margin distance will be inherited from parent element. For example, we can change the font size of the child elements by changing the font-size of parent element.
Relative Padding
The figure below shows that using a padding value in units of% instead of px is a more optimal way. The left durable element is not as balanced as the right element.
4. Overflow: hidden
We can eliminate the effect of the float element of the previous element by using the overflow: hidden declaration for the following content:
5. Word-break
In case the text on the web page is too long to break the layout, we can use the word-wrap attribute to remove this.
1 2 3 | .break-word { word-wrap: break-word; } |
