温故知新
目前主流的自适应终端屏幕的方法主要分为rem布局和响应式布局等。下面简单介绍一下这两种布局：
1.rem布局。rem即root em(根em),啥是em呢？就是前端的一个相对单位而已，我理解的是：相对于当前对象内的文本的font-size，如未设置，这相对的是浏览器的默认font-size（通常为16px）。回到rem，其实也是一个相对单位，只不过它相对的是根元素的font-size，在页面中它一般是不会改变的。一般使用时，就是利用设计图与实际终端屏幕宽度及对应的字体大小的比例公式控制实际终端的根元素字体大小即rem（也不知道说清楚没，反正我本人看得懂）,以此达到自适应屏幕的目的。
2.响应式布局依赖媒体查询实现，主要是针对主流终端多写几个布局样式，贼恶心，不想多说。
切人正题
以上两种方法基本能满足咱们的开发需求，但仍然存在缺陷的，例如rem是用时需要引入js脚本，耦合js与css,且它的相对布局主要针对的是屏幕宽度，对高度适配没啥帮助。响应式布局开发量大，且并不能完完全全的适配。
现在介绍新的纯CSS的相对单位vw,vh（推荐文章）,它们相对的是终端视口，视口（移动端你就可以当成屏幕就好啦）的宽为100vw,高为100vh。使用起来很简单，如果你需要一个宽高各为视口一半的div，只需要在css里面这样写:div {width: 50vw ;height: 50vh}，是不是很方便。但是有这么以一种情况，如果一个移动端页面某个元素按vw给宽度样式，页面随手机横屏时(vm,vh的相对值已互换)希望它的大小不变呢。你可以试试vmin,vmax。vmin代表vw与vh中较小的那一个，vmax代表vm与vh中较大的那一个。
实际使用中可能会遇到这样的问题，我需要一个元素宽度为一半视口宽度加上100px呢？在这里再给大家加点料，css的calc属性，使用方法：div{width: calc(50vw + 100px)},calc能整合的单位包括但不限于px、vw、vh、%、rem。
网友评论