科普下: 平时很少用的css单位: 1.长度单位: rem:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数; vw:相对于视口的宽度。视口被均分为100单位的vw; vh:相对于视口的高度。视口被均分为100单位的vh; vmax:相对于视口的宽度或高度中 ...
,概念的认识 rem:相对长度单位。相对于根元素 即html元素 font size计算值的倍数 vw:相对于视口的宽度。视口被均分为 单位的vw vh:相对于视口的高度。视口被均分为 单位的vh vmax:相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为 单位的vmax vmin:相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为 单位的vmin ,利用视口单位适配页面 对于 ...
2018-11-08 17:12 2 880 推荐指数:
科普下: 平时很少用的css单位: 1.长度单位: rem:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数; vw:相对于视口的宽度。视口被均分为100单位的vw; vh:相对于视口的高度。视口被均分为100单位的vh; vmax:相对于视口的宽度或高度中 ...
一、前言 根据前面写的 你不知道的CSS单位,进行了一种响应式布局的思考。 视口布局的优点:宽度和高度全部自动适应!再加上rem布局的字体适应,可以完美解决各种屏幕适配问题! 二、正文 1、vw、vh是基于视口的布局方案,故这个meta元素的视口必须声明。(解决宽高自动适配 ...
原文链接:https://blog.csdn.net/qq_24182885/java/article/details/81479457 一、前言 根据前面写的 你不知道的CSS单位,进行了一种响应式布局的思考。 视口布局的优点:宽度和高度全部自动适应!再加上rem布局的字体适应 ...
rem和vw布局主要都是为了更好地适配移动端,毕竟手机的型号太多了。 在进行移动端设计的时候,首先要引入一个meta标签。(禁止用户缩放) 我们在刚开始接触移动端的时候,可能都会遇到这种情况: PS中量取像素和web中手机预览的大小不太一样,似乎感觉web预览效果上要比UI ...
手机端原来的时候,在项目中使用js判断出html的字体,然后根据rem设置字体,但是js本着少用的原则,考虑用vw,vh等(顺带说一句,vw vh是网页可视区域宽度 高度 即浏览器宽度减去约16px) 以750px的收集设计稿,采用36px的基础单位 html{ font-size: calc ...
一、前言 我们h5项目终端适配采用的是淘宝那套《Flexible实现手淘H5页面的终端适配》方案。主要原理是rem布局。最近和别人谈弹性布局原理,发现虽然已经使用了那套方案很久,但是自己对rem的理解很含糊, 包括vw、vh等。所以打算写博客总结一下,以加深理解。 二、几个概念 ...
1、前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是“view width”缩写,定义为把当前屏幕分成一百份,1vw即为屏幕的1%,与之对应的是vh,把高分成一百份,1vh即为屏幕高的1%,一般我们常用的vw ...
大家知道rem可以用来做响应式布局,只是html元素上的font-size样式需要根据屏幕宽度来指定。 之前有用@media媒体查询,根据各种屏幕宽度写html的样式,也用过类似lib-flexible这样的js库动态改变html样式,总觉得挺麻烦的。 今天突然想到vw这个单位,发现用它来做 ...