5个有用的CSS技巧响应设计

今天我要分享我常用的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)文章，希望大家可以留言建议