使用不同的CSS单位，控制浏览器窗口网页内容的间距_北京响应式网站建设

今天一个流行的设计处理的网站是为了填补宽度 ​​和浏览器窗口的一个大的图像和/或消息主页上的高度。在网站的响应在布局的改变基于用户的设备和屏幕尺寸，如果他们要包括可用于这些各种屏幕空间这些屏幕图像跨越必须在大小可变的。实现这一变量的大小是很容易的，至少当它涉及到的宽度，但得到一个HTML元素的高度，填补了可用的屏幕空间一直是斗争。这一斗争引进CSS视域单位结束。

使用百分比

在这两个重要组成部分响应和自适应网页设计早已使用代替的像素为测量单位的百分比。如果你有，你想在屏幕的整个宽度伸展，而不管屏幕大小的一个部门，你可以这样做：

To style this, you could use this CSS:

这个部现在会在整个浏览器的宽度延伸，它会在屏幕的改变而改变。你甚至可以用百分比来一些填充添加到容器的边缘，使这些变量，以及：

这将2％的添加填充到容器的左侧和右侧（以0填充加到顶部和底部）。这对侧垫会加起来4％，所以用96％的宽度沿着你仍然有100％的宽元素。

现在，你可能认为你可以做同样的“高度”属性，就加入它是这样的：

可悲的是，因为预期这不起作用。您的“容器”元素将不会自动填满屏幕的高度，它填​​补了宽度的方式。你可以得到这个也通过设置HTML和body元素，以100％的高度，或根据您正在使用，在你的页面结构等父元素的高度工作markeup工作。这变得很混乱，很多什么应该是一个简单的视觉风格斗争。

介绍台视口

视台的工作方式与比例。首先，我们将着眼于两个单位：

1. vw – this is “viewport width”
2. vh – this is “viewport height”

对于这两种，1单位等于可用空间的1/100，或者该空间的1％。所以，如果你想你的容器师伸展页的全宽，你可以在CSS中这样做：

与使用百分比值height属性，这种新的视口的高度值不舒展我们的元素，以填补浏览器窗口的全尺寸，宽度都和高度！这种方法是，当你试图创建一个网页一个巨大的“广告牌”显示难以置信的帮助，并希望该显示器完全填满屏幕，只有下面的“折叠”该屏幕的任何其他内容。视口高度将达到这一长期以来的愿望风格你只是CSS的一条线，也不需要各种巫术的Javascript，试图确定浏览器的高度，并利用这些计算设置的值。

浆纱不仅仅是分部

一个有关使用视台非常好的事情是，他们可以用于大小超过象师的结构性因素。事实上，视单位的最佳用途之一是网页排版，
说你要一行文本来改变它的大小为屏幕的变化。你不能做到这一点使用测量的典型单位的字体（像素，EMS等），但与视口的单位，你可以在你的CSS文件中：

航向的字体大小，现在将是屏幕的宽度，这意味着该字体大小将动态地改变作为屏幕尺寸的变化的10％。视口高度值会以类似的方式工作，你可以发挥这些值，以达到你要与你的网站设计的外观。你甚至可以使用宽度值，这将使标题舒展屏幕与屏幕的全系列尺寸可能沿改变整个宽度（或全高）。

浆纱一个错误

与视口宽度的一个已知的问题发生在某些浏览器，当您使用等于100％的视口宽度单位，但你的页面也需要一个滚动条。因为滚动条需要从屏幕的可用宽度远，设置元件以包括该屏幕的100％将导致溢出的问题，一旦滚动条加入，由于100％计算出的宽度加上滚动条等于100％以上，如果你是大小列并排显示，这些列将下降，你不会得到你所追求的外观。

为了解决这个问题，请将您的父元素的CSS溢出属性设置为“隐藏”或“滚动”，这取决于是否该元素应该随着页面的其余部分滚动（注意，但是，如果你使用这个属性，滚动条会出现即使当不需要一个）。

浏览器支持

就像在网站设计的任何新的发展，最大的问题是你是否可以开始在工作中使用此。确定何时可以使用新的网站设计技术是重要的，视单位已经享受到了非常强大的浏览器的支持，这意味着你应该平安今天这个集成到您的网站的工作知道大多数浏览器会使您的风格为目的。

新的布局技术

视口单位只是那些使他们的方式进入网页设计行业新的CSS布局技术之一，给网络专业人员那么多的选择，当谈到创建站点布局。从CSS列到CSS网格布局，以新的方法响应的图像，这是一个激动人心的时刻是一个网页设计师，并与所有这些新的发展被玩弄。