今天我要分享我常用的CSS技巧与编码响应设计的样品案件5。他们是简单的CSS属性,如最小宽度,最大宽度,溢出,和相对值-但这些特性发挥响应设计的一个重要组成部分。
1。响应视频
这反应视频CSS技巧由tjkdesign.com发现的 。我的博客上讲述之前,你可能在这里阅读详情。这使得视频嵌入扩大全形的边界。
.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。最小及最大宽度
max-width属性允许你设置元素的最大宽度。最大宽度的目的是为了防止从扩展边界元素。
最大宽度容器
在下面的例子中,我指定的容器显示800px,如果可能的话,但它不应该超过90%的边界宽度。
.container {
width: 800px;
max-width: 90%;
}
响应图像
你可以使图像自动调整到最大宽度的边界,通过使用最大宽度:100%和高度:汽车。
img {
max-width: 100%;
height: auto;
}
上述反应图像的CSS IE7和IE9,但没有对IE8的合作。为了解决这个问题,宽度:自动添加。你可以申请有条件的CSS专为IE8,或使用IE浏览器的黑客如下:
@media \0screen {
img {
width: auto; /* for ie 8 */
}
}
最小宽度
最小宽度是opposit的最大宽度。它设置元素的最小宽度。在下面的例子形式,最小宽度是用来输入文本字段,以防止输入变得非常小的时候缩减。
3。相对值(演示)
在响应设计,知道什么时候使用相对值,可以简化CSS和最大化的最佳布局结果。下面是一些例子。
相对保证
下面是一个相对左边距用于空间螺纹评论commentlist的例子。,而不是使用固定的像素值,我用百分比值空间了子列表。在左边的截图所示,在子列表内容框上移动的决议得到非常小的,如果像素左旁使用。
相对字体大小
与相对值(如:em或%),字体大小,行高和保证金间距可以继承。例如,我可以改变所有后代元素的字体大小,通过简单地改变父元素的字体大小。
相对填充
下面的截图显示了它是更好的使用相对百分比填充,而不是固定的像素填充。在左侧的框中显示如果使用像素填充一个不平衡填充空间。百分比填充右边的框中显示内容区域最大化。
4。溢出:隐藏的技巧
在我以前的文章,可以清除浮动溢出属性。这一招是非常有用的。从前面的元素可以清除浮动,并保持容器内运行,通过溢出:隐藏的内容。
5。破字
我也谈到了前字Wrap属性。你可以强制unbreaking文本(如URL文本)包装,而不是运行在一个单一的线。
.break-word {
word-wrap: break-word;
}
站长行业门户(www.software8.co)文章,希望大家可以留言建议