分享更有价值
被信任是一种快乐

CSS单位的示例分析

文章页正文上

这篇文章主要介绍了CSS单位的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
  像 px、rem、em、% 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位。CSS3 又引入了新单位:vw、vh、vmin、vmax。下面对它们做个详细介绍。
  单位作用特性px页面按精确像素展示绝对单位rem相对根节点html字体大小来计算相对单位em基准点为相对父节点字体的大小相对单位%相对于父元素的大小设定的比率相对单位vw视窗宽度的百分比,1vw代表视窗宽度的1%视窗单位vh视窗高度的百分比,1vh代表视窗高度的1%视窗单位vmin当前vw和vh中较小的一个值视窗单位vmax当前vw和vh中较大的一个值视窗单位
  tip:vw、vh、vmin、vmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。免费云主机、域名
  视窗(Viewport)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。
  假如给页面设置一个宽800px,则400px=50vh=50%。
  一、px、em和rem的区别
  px是固定的像素,一旦设置了就无法因为适应页面大小而改变。
  em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。
  对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素。
  rem中的r意思是root(根源),这也就不难理解了。
  二、vw、vh 与 % 百分比的区别
  % 是相对于父元素的大小设定的比率,vw、vh 是视窗大小决定的。
  vw、vh 优势在于能够直接获取高度,而用 % 在没有设置 body 高度的情况下,是无法正确获得可视区域的高度的,所以这是挺不错的优势。
  三、vmin、vmax 用处
  做移动页面开发时,如果使用 vw、wh 设置字体大小(比如 5vw),在竖屏和横屏状态下显示的字体大小是不一样的。
  由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。感谢你能够认真阅读完这篇文章,希望小编分享的“CSS单位的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持云技术,关注云技术行业资讯频道,更多相关知识等着你来学习!

相关推荐: JS循环中使用await会产生什么反应

本篇内容介绍了“JS循环中使用await会产生什么反应”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! 这个问题是这样产生的?某天,在学习异步的知识遇到这样一道题…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册