-CSS3长度单位rem、vh、vw、vmin、vmax、ex、ch

用这几个单位就可以做自适应布局了，尤其是下面的vh，解决了高度不能使用百分比的问题，很爽。

另外，自适应除去用下面这些单位之外，还可以用width的一些新属性，fill-available、fit-content、max-content、min-content

一、rem

1、使用js来使rem自适应

最新领悟重点，关于设计图和量出来的值使用rem：重点为根元素的像素值。我们在js里面把根元素的像素值用读取的屏幕宽度(当然写代码的时候肯定屏幕宽度和设计图宽度一样)除以设计图宽度，即$("html").width()/设计图宽度，就实现了设计图上1px代表css中的1rem。所以这时候只需要在设计图上面把尺寸量出来，然后后面加上rem就好了，比如设计图上量出来为10px，代码里面就写10rem。

rem是相对于页面根节点即html元素的字体大小的，所以需要用js来动态生成html的字体大小。

下面js，简单说就是根据窗口宽度来动态生成页面根节点上的fontSize，如果页面的所有长度值都是用rem来设置的，就能保证只改变根节点的fontSize就可以改变页面所有的长度。

// js
(function() {var html = $("html"),// 下面这个fontSize即rem的宽度// 这里这个设计图宽度就是设计图的整个的宽度。这样设置了之后1rem就相当于是1px了。所以设计图量出来了是多少px，就可以直接写是多少remfontSize = html.width()/设计图宽度 + "px";html.css("fontSize",fontSize);console.log(fontSize);// 原生写法如下// var html = document.getElementsByTagName("html")[0];// var oWidth = document.body.clientWidth || document.documentElement.clientWidth;// html.style.fontSize = oWidth / pwidth * prem + "px";
})();

2、操作css来使rem自适应

(1)设置html元素字体大小：由于html元素的默认字体大小为16px，所以我们直接设置html {font-size: 62.5%;}来直接把html的字体大小设置为10px，就相当于1rem相当于10px了。所以其它元素的大小，直接量出来除以10，单位改成rem就好了

(2)改变rem大小以自适应不同窗口大小：这里主要就是用@media来对html的字体大小进行限制了。

 html {font-size: 62.5%; } // 这里设置62.5%，相当于是把根节点设置为10px。即1rem = 10px// 下面这几个@media就是来做响应式的。根据窗口的缩放比例，就可以来设置下面的html节点是多少。// 具体来说就是由于编写的时候是有一个设计图的，而不加@media的就代表设计图基于的html字体值。要做响应式，就把设计图的宽度与@media里面的宽度来比较，然后就有一个比值了，就可以把设计图基于的fontsize乘以比值，就是下面的html的fontsize了@media only screen and (min-width: 481px){html {font-size: 94%!important;}}@media only screen and (min-width: 561px){html {font-size: 109%!important;}}@media only screen and (min-width: 641px){html {font-size: 125%!important;}}body{font-size:12px; // 这里这个是为了兼容，怕不支持rem才写的font-size:1.2rem ; // 12÷10=1.2。由于1rem为10px，所以12rem就是12px了}p{font-size:14px;font-size:1.4rem;}

二、vh和vw

chrome v66开始已经支持。原则上做响应式布局的话，vh和vw是要优于rem的。但是这个的兼容性较差，不支持ios上面的浏览器，android的浏览器也是7以上才支持；但是rem的话ios上面的浏览器是支持的，android的浏览器几乎都支持。所以还是在PC上面用这个比较好。

这两个单位很好用，有了这个终于可以用响应式的方法来设置高度了，这两个单位，是相对于视口的宽高来进行设置的。1vh相当于viewport高度的1/100，1vw相当于viewport宽度的1/100。如下：

// 下面为设置的占满视口高度的slide
.slide {height: 100vh;
}// 下面为设置高度为减去上面的header高度
.slide2 {height: ~'calc(100vh - @{layout-header-height})';
}

配合css的calc，还有max-content。

三、vmin和vmax

vmin从chrome v26开始已经支持。vmax从chrome v66开始已经支持

这两个单位也很好用。它也是相对于视口的宽高来设置，1vmin表示视口宽高中较小值的1/100，1vmax表示视口宽高中较大值的1/100。如：视口宽度设置为800px，视口高度设置为1080px，则1vmin表示8px，1vmax表示10.8px

四、ex 和 ch

ex和ch单位，与em和rem相似，依赖于当前字体和字体大小。ex表示当前字体em的一半，而ch就不是很清楚了

-CSS3长度单位rem、vh、vw、vmin、vmax、ex、ch相关推荐

px,em,rem,vh,vw,vmin,vmax的区别
css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输 ...
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对 ...
7、em/px/rem/vh/vw区别？
简介 em/px/rem/vh/vw都属于css的单位,这些单位可以分为相对单位,绝对单位 px:绝对单位,网页按照精确像素来显示 em:相对单位,相对自身定义的font-size来计算,自身没有设置 ...
html pc vw过大,细说em/rem/vh/vw与响应式布局
细说em/rem/vh/vw与响应式布局一.em,rem的原理与应用场景 CSS单位中的长度单位分为:相对长度.绝对长度,如下表: 引用MDN上的两句话: em:在 font-size 中使用是相对 ...
认识css长度单位 px % em rem vh vw
目录长度单位 px % em rem vh.vw 总结长度单位在日常的项目开发,在使用css样式进行时布局的时候,我们常常用到px.%.em这三个单位.CSS3开始,浏览器新增加了rem.vh. ...
说说em/px/rem/vh/vw的区别
一.介绍传统的项目开发中,我们只会用到px.%.em这几个单位,它可以适用于大部分的项目开发,且拥有比较良好的兼容性从CSS3开始,浏览器对计量单位的支持又提升到了另外一个境界,新增了rem.vh ...
CSS查缺补漏之《常用长度单位(px、em、rem、%、vw/vh、vmin/vmax)》
此文内容较少,轻轻松松掌握,莫要有压力~ 正如现实生活中长度具有mm.dm.cm.m等,在css中,也具备多种长度单位,本文对常用的几种单位进行详细举例介绍~ px:像素单位初学css时,px单位经 ...
浅谈css3长度单位rem，以及移动端布局技巧
rem是什么? rem是css3中新增加的一个单位属性(font size of the root element),根据页面的根节点的字体大小进行转变的单位.root!!!!!!!!!根节点,也就是 ...
px、em、rem、vw、vh、vmax、vmin的区别
px是绝对单位还是相对单位 ? 按照 CSS 规范的定义,CSS 中的 px 是一个相对长度,它相对的,通常就是电脑显示器.通常电脑显示器的分辨率是96DPI,也就是1像素为1/96英寸一般来说,p ...

-CSS3长度单位rem、vh、vw、vmin、vmax、ex、ch

一、rem

1、使用js来使rem自适应

2、操作css来使rem自适应

二、vh和vw

三、vmin和vmax

四、ex 和 ch

-CSS3长度单位rem、vh、vw、vmin、vmax、ex、ch相关推荐

最新文章

热门文章