1. David Wu首页
  2. web前端
  3. HTML

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

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

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

使用百分比

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

<pre><code><div class="container"> <!– content would go here –> </div></code></pre>

To style this, you could use this CSS:

<pre><code>.container { width: 100%; }</code></pre>

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

<pre><code>.container { width: 96%; padding: 0 2%; }</code></pre>

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

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

<pre><code>.container { width: 96%; padding: 0 2%; height: 100%; }</code></pre>

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

介绍台视口

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

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

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

<pre><code>.container { width: 100vw; }</code></pre>

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

浆纱不仅仅是分部

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

<pre><code>h1 { font-size: 10vw; }</code></pre>

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

浆纱一个错误

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

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

浏览器支持

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

新的布局技术

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

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/7642

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注