装饰公司网站建设方案,有哪些可以做策划方案的网站,公司免费邮箱如何注册,常州城乡建设局网站首页在css中单位长度用的最多的是px、em、rem#xff0c;这三个的区别是#xff1a;一、px是固定的像素#xff0c;一旦设置了就无法因为适应页面大小而改变。二、em和rem相对于px更具有灵活性#xff0c;他们是相对长度单位#xff0c;意思是长度不是定死了的#xff0c;更适…在css中单位长度用的最多的是px、em、rem这三个的区别是一、px是固定的像素一旦设置了就无法因为适应页面大小而改变。二、em和rem相对于px更具有灵活性他们是相对长度单位意思是长度不是定死了的更适用于响应式布局。rem是CSS3新增的一个相对单位root em根em三、em是相对于其父元素的字体大小来设置的一般都是以的“font-size”为基准。这样就会存在一个问题如果我想对某个特定的元素的进行字体大小设置那么他所有的子元素都会以他为基础就会导致整个页面内元素所占比例与UI定稿不一样。而rem是相对于html根元素的“font-size”为基准这样就意味着我们只需要在根元素确定一个参考值。(如果还想让字体为16px,直接通配符先设置16px,html再设置10px即可)注任意浏览器的默认字体大小都是16px。所有未经调整的浏览器都符合: 1em16px1rem16pxem: style.father{ width: 300px;height: 300px;background-color: aqua;}.child{font-size: 10px;//father1和child一样大重新规定font-size为10//所以1em10px,em继承父元素渲染时他会从自身向外找自己有就用自己//的font-size标准没有再用最近的父元素的默认最顶层是html是1em16pxwidth: 30em;height: 30em;background-color: blue;}/stylebodydiv classfatherdiv classchild/div/div
/body
rem: stylehtml{font-size: 10px;}//child2和child3都是30px,只会继承根元素html默认是1rem16px.child2{font-size: 50px; width: 3rem;height: 3rem;}.child3{width: 3rem;height: 3rem;}/stylebodydiv classchild2/divdiv classchild3/div
/body
使用场景:rem的使用场景一般移动端的UI设计稿的宽度分为640px,和750px两种,但是要想使用一份代码就适配所有屏幕就必须使用相对单位这时候使用rem是最好的选择。我们将UI设计稿人为均分成几等份使用媒体查询判断屏幕的大小针对判断出的每一种屏幕大小给其html根元素的字号大小设置为均分后的每一等份的大小。如UI设计稿宽度为640px,我们将UI设计稿均分为20等份,那么我们就可以通过媒体查询给320px的屏幕设置HTML根元素的字号大小为16px320/20,给640px大小的屏幕设置html根元素字号大小为32px(640/20),则我们在后续书写代码的时候ui设计稿上的一个div的盒子宽度为160px,我们使用rem单位将其表示为width5rem,则此盒子无论在320px的屏幕下还是在640px的屏幕下都将显示为屏幕的四1/4的宽度。简便方法我们在使用rem时每一个元素的大小都将从设计稿的px转换为rem相对单位非常麻烦。遇到不能整除的数值还会导致最后页面数值的不精确在这种情况下我们可以使用淘宝开发的flexible.js插件配合开发工具vs code的cssrem插件可避免做媒体查询与数值的转换。前者避免媒体查询后者避免做数值转换rpx 是微信小程序独有的是小程序中使用的相对单位可以根据屏幕宽度进行自适应不论屏幕大小。用法和rem类似。rpx与px之间的换算以 iPhone6 为例iPhone6 的屏幕宽度为 375px 共有 750 个物理像素则 750rpx 375px 750 物理像素1rpx0.5px1物理像素在css3中vw与vh: vw单位可以根据窗口的宽度自动改变大小“1vw”是窗口宽度的“1%”vh单位可以根据窗口的高度自动改变大小“1vh”是窗口高度的“1%”和pxrem等类似属于长度单位vw 可以帮助我们实现移动端自适应布局其优点在于所见即所得甚至优于rem因为完全不用使用额外的计算。推荐和sass、less这种css预处理语言一起使用因为其可以定义变量及函数会在使用vw上提供巨大帮助。vw视窗宽度的百分比1vw 代表视窗的宽度为 1%vh视窗高度的百分比vmin取当前Vw和Vh中较小的那一个值vmax取当前Vw和Vh中较大的那一个值vh和vw相对于视口的高度和宽度 1vh 等于1/100的视口高度1vw 等于1/100的视口宽度 比如浏览器高度900px宽度为750px, 1 vh 900px/100 9 px1vw 750px/100 7.5 px 。
