网站建设可以一次性进损益吗,html手机网站,wordpress目录安装主题,html企业网站实例目录
一、px
二、rpx
三、em
四、rem
五、vh和vw
六、rpx 和 px之间的区别
七、px 与 rem 的区别 一、px
px#xff08;像素#xff09;#xff1a;
1、相对单位#xff0c;代表屏幕上的一个基本单位#xff0c;逻辑像素。 2、不会根据屏幕尺寸或分辨率自动调整大…目录
一、px
二、rpx
三、em
四、rem
五、vh和vw
六、rpx 和 px之间的区别
七、px 与 rem 的区别 一、px
px像素
1、相对单位代表屏幕上的一个基本单位逻辑像素。 2、不会根据屏幕尺寸或分辨率自动调整大小。 3、在高分辨率屏幕上可能显得很小。
二、rpx
rpx微信小程序单位
1、主要用于微信小程序开发。 2、是相对单位基于屏幕宽度进行缩放。 3、可以在不同设备上保持一致的布局。
三、em
emelement em是相对于父元素的字体大小的单位。如果父元素的字体大小为16px则1em等于16px。使用em单位时元素的大小会随着父元素的字体大小的改变而变化。em单位适用于嵌套元素特别是需要根据父元素的字体大小进行调整的情况。然而em单位可能会受到任何继承的父元素字体大小的影响这有时会导致布局的不确定性。
于 em 的的知识 1、通常情况下用户的浏览器默认渲染的文字大小是 16px。 2、用户可以通过重新定义根标签(或者父元素标签)的 font-size 属性来重新定义默认的文字大小 3、在响应式布局中页面中的所有元素都使用额 em 单位值em 是一个相对的大小默认情况下 1em16px 4、相对的大小计算的的参考物是指元素父元素的 font-size 的属性 5、比如一个在div设置字体大小为 16px此时这个div的后代元素就基层了他的字体大小 6、font-size 属性具有继承性
em的运用 html { font-size: 100%; } .box-0 { height: 1em; /* 此时height等于16px */ } .box-1 { font-size: 0.625em; /* 此时基准字号以变更为16*0.62510px */ height: 1em; /* 此时实际height等于10px */ } 四、rem
rem (root em)是一个相对单位类似于emem是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小。
比如根元素html设置font-size12px; 非根元素设置width:2rem; 则换成px表示就是24px。
rem的运用 html { font-size: 12px; /* 根html 为 12px */ } div { font-size: 2rem; /* 此时 div 的字体大小就是 24px */ } rem的优势
父元素文字大小可能不一致 但是整个页面只有一个html可以很好来控制整个页面的元素大小。
设置字体推荐使用rem尽量不用用px或em。
五、vh和vw
vh视口高度和vw视口宽度 1、vh和vw是相对于视口的高度和宽度的单位。 2、1vh等于视口高度的1%1vw等于视口宽度的1%。 3、这些单位非常适合响应式设计因为它们让元素根据屏幕大小自动调整大小。
这里是视窗指的是浏览器内部的可视区域大小即 window.innerWidth/window.innerHeight 大小不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
六、rpx 和 px之间的区别
1、在普通网页开发中最常用的像素单位是px 2、在小程序开发中推荐使用 rpx 这种响应式的像素单位进行开发
七、px 与 rem 的区别
1、px 对于只需要适配少量设备且分辨率对页面影响不大的使用 px 即可 px 设置更为精准。 2、随着 rem 在众多的浏览器都得到支持有需要考虑到对多设备多分辨率的自适应无疑这时候 rem 是最合适的如移动端的开发。
