文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS3中视窗单位Viewport的常见用法有哪些

2024-04-02 19:55

关注

CSS3中视窗单位Viewport的常见用法有哪些,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

介绍视窗(Viewport)单位

视窗(Viewport)是你的浏览器实际显示内容的区域——换句话说是你的不包括工具栏和按钮的网页浏览器。这些单位是vw,vh,vmin和vmax。它们都代表了浏览器(视窗(Viewport))尺寸的比例和窗口大小调整产生的规模改变。

比方说我们有一个1000px(宽)和800px(高)的视窗(Viewport)

vw——代表视窗(Viewport)的宽度为1%,在我们的例子里50vw = 500px。
vh——窗口高度的百分比 50vh = 400px。
vmin——vmin的值是当前vw和vh中较小的值。在我们的例子里因为是横向模式,所以50vim = 400px。
vmax——大尺寸的百分比。50vmax = 500px。
你可以在任何一个可以使用像素值的地方使用它们,比如width,height,margin,font-size等等。它们将通过窗口大小的调整或旋转设备的浏览器来重新计算这些值。

占用页面的整个高度

每一个前端开发人员都致力于这件事。你的第一直觉是这样做:

CSS Code复制内容到剪贴板

  1. #elem{   

  2.     height: 100%;   

  3. }  

然而,除非我们为html和body添加100%的高度,但只是这样还是不行的,因为这样的代码并不优雅而且很有可能会破坏你的设计的其余部分。使用vh就变得相当容易了,只需要为高度设置100vh,那它将永远都是你窗口的高度。

CSS Code复制内容到剪贴板

  1. #elem{   

  2.     height: 100vh;   

  3. }  


视口宽度大小
vw是CSS3新加入的一个使用视口宽度来计算字体大小的单位。这样可以允许更多的响应字体大小。

尽管这似乎是为响应式设计的一个很有用的单位,但我个人不是它的粉丝。因为它并不能在字体大小上给我更多的控制权,他总是显示的过大或过小。

我的方法

在我做这项研究之前,我一直使用像素来设置我的字体大小。这是因为现在的大多数浏览器允许用户在字体太小的情况下自行放大页面,所以使用像素并没有什么问题。

但是,我发现这种方式在很大程度上限制了扩展能力。虽然我的字体在中小屏幕上看起来不错,但他应该在大屏幕上有更好的优化。即便用户有放大的选项,这也不应该是我们希望他们来做的事情。

因此我使用rem设置的解决方案是(使用像素作为备用)。

CSS Code复制内容到剪贴板

  1. html {   

  2.   font-size: 62.5%;   

  3. }   

  4. body {   

  5.   font-size: 16px;   

  6.   font-size: 1.6rem;   

  7.     

  8. }   

  9. h2 {   

  10.   font-size: 32px;   

  11.   font-size: 3.2rem;   

  12. }  

这样我扩大了字体大小而只需要这样写——

CSS Code复制内容到剪贴板

  1. @media screen and (min-width: 1280px) {   

  2.   html {   

  3.     font-size: 100%;   

  4.   }   

  5. }  

这个方法是用像素作为降级单位因为IE8及以下不支持rem。这有一个问题是当我改变基础字体大小时只能应用在可扩展性大小上面而不适用于后备字体大小。不过我不认为这是一个巨大的问题,因为这个问题对于较大规模的设备的核心来说只是一个额外的问题。

如果你有任何关于如何改善这个问题的想法,请在评论里让我知道。我也可以写一个SCSS的混入,这样我可以不必输入这两个后备和rem单位。

子元素大小根据浏览器改变而不是父元素

在某些情况下,你想要的是子元素的大小相对于窗口改变而不是父元素。同样的,按照前面的例子,这样是不行的:

CSS Code复制内容到剪贴板

  1. #parent{   

  2.     width: 400px;   

  3. }   

  4. #child{   

  5.       

  6.     width: 100%;   

  7. }   

  8. 如果我们用vw来设置子元素,那么它会简单的溢出并采取网页的全宽:   

  9.   

  10. #parent{   

  11.     width: 400px;   

  12. }   

  13. #child{   

  14.       

  15.     width: 100vw;   

  16. }  

响应垂直居中

通过设置元素的width,height和margin的视窗(Viewport)单位,你可以不使用任何其它技巧来设置居中。

这里有一个高度为60vh 上下外边距为20vh的矩形,它们加起来是100vh(60+2*20),使它即便调整窗口大小也可以始终居中。

CSS Code复制内容到剪贴板

  1. #rectangle{   

  2.     width: 60vw;   

  3.     height: 60vh;   

  4.     margin: 20vh auto;   

  5. }  

等宽列

你可以使用视窗(Viewport)单位来设置响应式网格。它们的行为类似于百分比但总是相对于视窗(Viewport)的大小。所以你可以将它们放在一个比窗口宽的父元素里,但它仍然有网格来保持其应有的宽度。这样来创建全屏滑块可谓得心应手。

这项技术需要元素用float:left来对齐彼此相邻的元素:

CSS Code复制内容到剪贴板

  1. .column-2{   

  2.     float: left;   

  3.     width: 50vw;   

  4. }   

  5. .column-4{   

  6.     float: left;   

  7.     width: 25vw;   

  8. }   

  9. .column-8{   

  10.     float: left;   

  11.     width: 12.5vw;   

  12. }  

总结

视窗(Viewport)单位有它的用途而且值得尝试。它们易于理解,而且在某些情况下对于代替CSS更加难的解决方案或不可能实现的技术有非常大的帮助。

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注编程网行业资讯频道,感谢您对编程网的支持。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯