CSS3 的视口单位vw、vh实现自适应(带有px,em,rem的简单介绍)
一、px,em,rem,vw的简单介绍
1、px
px其实就是像素的意思,全称pixel,也就是图像的基本采样单位。对于不同的设备,它的图像基本单位是不同的,比如显示器和打印机。而我们通常所说的显示器分辨率是指桌面设定的分辨率,不是显示器的物理分辨率,但是现在我们的桌面分辨率和物理分辨率几乎是一致的,因为这样显示效果最佳。所以总的来说px就是对应我们显示器的分辨率。这样就会有个问题就是如果使用px的话我们就要根据不同电脑的分辨率来做自适应,有点麻烦。
2、em
em是相对长度单位。相对于当前对象内本文的字体尺寸(如果没有设置本文尺寸,那就是相对于浏览器默认的字体尺寸,也就是16px),这样计算的话。如果没有设置字体尺寸就是1em = 16px。如果使用em的话,有个好的建议,就是将body的font-size设置成62.5%,也就是16px * 62.5% = 10px。这样的话1em = 10px,方便我们计算。
3、rem
rem和em一样也是相对长度单位,但是不一样的是rem始终都是相对html根元素。这样有个很大的有点就是使用rem后不会受到对象内文本字体尺寸的影响,而且只需要改变根元素就能改变所有的字体大小。兼容性也是不错的,IE8以上版本和其他浏览器都已经支持,是个做响应式页面的好选择
4、重点:vw和vh
vw和vh是视口(viewport units)单位,何谓视口,就是根据你浏览器窗口的大小的单位,不受显示器分辨率的影响,是不是很神奇,这就代表了,我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。
vw是可视窗口的宽度单位,和百分比有点一样,1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px,那么1vw = 18px。和百分比不一样的是,vw始终相对于可视窗口的宽度,而百分比和其父元素的宽度有关。
vh就是可视窗口的高度了。
这边顺便提一下vmin和vmax,vmin是指选择vw和vh中最小的那个,而vmax是选择最大的那个
兼容性方面是vw和vh的短板了,如下图所示,使用vw和vh所需求的版本还是较高的
二、使用vw,vh能做什么
1、响应式页面轻松搞定
由于vw,vh的特性,他们能够根据窗口大小来自动调节字体大小,这就能很轻松地完成响应式页面的布局
2、小技巧之响应垂直居中
可以使用vw,vh来实现在页面中响应垂直居中,只需要以下代码
#box { width: 50vw; height: 50vh; margin: 25vh auto;
}
只要设置margin的上下间距,使之heigit + margin-top +margin-bottom = 100 ,width + margin-left + margin-right = 100 ,就能够响应垂直居中
3、模仿bootstrap的栅栏布局
了解过bootstrap的都知道它的栅栏布局,而使用vw,vh就能够轻松实现。
.col-2 { float: left; width: 50vw;
}
.col-4 { float: left; width: 25vw;
}
.col-5 { float: left; width: 20vw;
}
.col-8 { float: left; width: 12.5vw;
}
上面是column实例只要在一行中所有的列加起来等于100vw就实现响应式布局
总结:
个人认为视口单位是个用来做响应式布局很不错的单位,当然如果要使用vw,vh,我的建议是rem结合vw来开发,因为视口单位有个缺点就是它没有最小或者最大限制,这就达不到我们都时候所希望的一个限制(比如窗口太小了,字都看不清)。所以我们可以在根元素上设置vw和vh,然后在根元素上限制最大最小值,然后配合body设置最大最小宽度。
CSS3 的视口单位vw、vh实现自适应(带有px,em,rem的简单介绍)相关推荐
- html em vw,CSS3 的视口单位vw、vh实现自适应(带有px,em,rem的简单介绍)
一.px,em,rem,vw的简单介绍 1.px px其实就是像素的意思,全称pixel,也就是图像的基本采样单位.对于不同的设备,它的图像基本单位是不同的,比如显示器和打印机.而我们通常所说的显示器 ...
- 前端学习(381):CSS3 的视口单位vw、vh实现自适应(带有px,em,rem的简单介绍)
一.px,em,rem,vw的简单介绍 1.px px其实就是像素的意思,全称pixel,也就是图像的基本采样单位.对于不同的设备,它的图像基本单位是不同的,比如显示器和打印机.而我们通常所说的显示器 ...
- px,em,rem,vh,vw,vmin,vmax的区别
css手册中关于font-size是这么介绍的: font-size 值可以是绝对或相对值. 绝对值: 将文本设置为指定的大小 不允许用户在所有浏览器中改变文本大小(不利于可用性) 绝对大小在确定了输 ...
- 认识css长度单位 px % em rem vh vw
目录 长度单位 px % em rem vh.vw 总结 长度单位 在日常的项目开发,在使用css样式进行时布局的时候,我们常常用到px.%.em这三个单位.CSS3开始,浏览器新增加了rem.vh. ...
- html移动端怎么做城市选择,移动端页面单位的选择(px, em, rem, vw)
px, em, rem的区别: px:绝对字体大小 em:基于一个基数来计算出相对字体大小.(移动端用的少) rem:基于根节点(html)的字体大小来计算. vw:可视区宽度单位.1vw等于可视区宽 ...
- html 字号和像素的关系,一文搞懂CSS中的字体单位大小(px,em,rem...)
在学习的过程中,发现CSS有很多可以形容单位的尺寸.比方px,em,rem,vw等等.平常也没有深究,一来是没时间,二来是在我学习清单中优先级过低.一直想彻底弄明白,一直耽搁到现在.现在花上一点时间来 ...
- CSS单位--px,em,rem,rpx区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? Px PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够 ...
- css中的单位换算_css大小单位px em rem的转换和详解
css大小单位px em rem的转换和详解 PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firef ...
- 移动端页面单位的选择(px em rem)
移动端页面单位的选择(px em rem) 绝对单位: px 相对单位: rem em em具有继承性 继承自直接父类 所以说在移动端很少用 浏览器默认的字体大小 16px 那么 1em= ...
最新文章
- 允许使用抽象类类型 isearchboxinfo 的对象_Java新手必学:面向对象的特性都有哪些?...
- linux下查看BLAST程序,Linux下BLAST的使用---转载
- sql 中使用 where 1=1 和 where 1=0的作用
- 【推荐系统入门】一窥推荐系统的原理
- 在Linq to Sql中管理并发更新时的冲突(3):使用记录的时间戳进行检测
- 二叉树和为某种所有路径
- 前端学习(1663):前端系列实战课程之禁止保存
- jquery 获取键值对中最大值_jquery属性的操作
- SpringCloud学习笔记015---Spring Boot集成RabbitMQ发送接收JSON
- django+uwsgi+nginx部署
- 【数据结构和算法笔记】二叉树和树/森林的相互转换
- matlab在mac中好用吗,Matlab Mac版上手
- 阿里月饼事件被辞程序员冤吗
- python日历代码_python日历代码
- 使用netron实现对onnx模型结构可视化
- python代码转换成EXE文件之pyinstaller使用教程
- 在Java中不允许使用使用一下字母组合作为文件名(不区分):CON,PRN,AUX,NUL,COM1,COM2,COM3,COM4,COM5,COM6,COM7,COM8,COM9,LPT1,LPT2
- 陪我到可可西里看一看海,不要未来,只要你来。——大冰 《陪我到可可西里去看海》
- 51单片机之外部中断方式 ——— INT0 中断
- 微信小程序 - 云开发轮询实现定时推送订阅消息