首页 > 其他分享 >CSS尺寸设置的单位

CSS尺寸设置的单位

时间:2023-01-25 19:45:41浏览次数:32  
标签:元素 字体大小 rem 单位 尺寸 设置 vw CSS

解题思路

得分点

    px、rem、em、vw、vh

标准回答

    px:pixel像素的缩写,绝对长度单位,它的大小取决于屏幕的分辨率,是开发网页中常常使用的单位。

    em:相对长度单位,在 `font-size` 中使用是相对于父元素的字体大小,在其他属性中使用是相对于自身的字体大小,如 width。如当前元素的字体尺寸未设置,由于字体大小可继承的原因,可逐级向上查找,最终找不到则相对于浏览器默认字体大小。

    rem:相对长度单位,相对于根元素的字体大小,根元素字体大小未设置,使用浏览器默认字体大小。

    vw:相对长度单位,相对于视窗宽度的1%。

    vh:相对长度单位,相对于视窗高度的1%。

加分回答

    rem应用:在移动端网页开发中,页面要做成响应式的,可使用rem配合媒体查询或者flexible.js实现。原理是通过媒体查询或者flexible.js,能够在屏幕尺寸发生改变时,重置html根元素的字体大小,页面中的元素都是使用rem为单位设置的尺寸,因此只要改变根元素字体大小,页面中的其他元素的尺寸就自动跟着修改

    vw应用:由于vw被更多浏览器兼容之后,在做移动端响应式页面时,通常使用vw配合rem。原理是使用vw设置根元素html字体的大小,当窗口大小发生改变,vw代表的尺寸随着修改,无需加入媒体查询和flexible.js,页面中的其他元素仍使用rem为单位,就可实现响应式。

标签:元素,字体大小,rem,单位,尺寸,设置,vw,CSS
From: https://www.cnblogs.com/jycom/p/17067191.html

相关文章

  • typora+picGo腾讯云图床设置
    前言需求原因​ 大部分人在写博客都是使用的较为好看的markdown格式,而我们在本地编写markdown时其中的图片一般都是截图后粘贴的。这些图片其实都保存在了本地文件夹中,ma......
  • linux samba 共享设置
     linux和windows之间传输文件有很多种方法,今天分享一下通过samba软件实现文件共享。首先切换到root用户,用命令aptinstallsamba安装samba。按提示安装,安装完执行命令sam......
  • 黑马程序员前端-CSS综合案例:学成在线模块添加
     前端学习笔记教程不定期更新中,传送门:​​前端HTML第一天:什么是网页?什么是HTML?网页怎么形成?​​​​黑马程序员前端-CSS入门总结​​​​黑马程序员前端-CSS之emmet语法​......
  • 黑马程序员前端-CSS属性书写顺序(重点)
     前端学习笔记教程不定期更新中,传送门:​​前端HTML第一天:什么是网页?什么是HTML?网页怎么形成?​​​​黑马程序员前端-CSS入门总结​​​​黑马程序员前端-CSS之emmet语法​......
  • 不能直接在 CSS 变量中写计算,针对于 Scss 项目
    不论是在Scss还是在CSS中,给CSS变量(自定义变量)直接写计算,都不会生效。例如:*{--text-size:calc(100px*1);}打开浏览器查看计算的样式表中,并没有计算得到10......
  • CSS font-display 控制字体加载和替换
    在编写网站的时候,或多或少都会用到一些网络上的字体,CSS3中虽然加入了对WebFonts(网络字体)的支持,但是浏览器对它们的加载和默认处理方式会极大的影响网站的性能和用户体验......
  • 在React中,怎么用tailwind css(就叫顺丰吧 :D 。。。)封装Button组件
    我的目的想用tailwindcss来快速封装Button组件,而不是从更大型的UI库导入一个Button组件(那样就太大材小用)。几个工具从这抄的样式在学习怎么形成规范化的组件额,仅......
  • css
    一.基础认知1.1.css介绍css:cascadingstylesheets:层叠样式表用于修饰HTML标签命令1.2css的引入方式内嵌式:css写在style标签中,style标签写在head标签中,写在title标签......
  • SVG Animation & CSS stroke-dasharray & stroke-dashoffset All In One
    SVGAnimation&CSSstroke-dasharray&stroke-dashoffsetAllInOnehttps://maxwellito.github.io/vivus/https://github.com/maxwellito/vivus#vivusjshttps://de......
  • Windows 设置显示亮度代码【msdn】
    ​​GetPhysicalMonitorsFromHMONITORfunction​​Microsoftcode:HMONITORhMonitor=NULL;DWORDcPhysicalMonitors;LPPHYSICAL_MONITORpPhysicalMonitors=NULL;//Ge......