CSS的一些单位,如rem、px、em、vw、vh、vm
总结了一下一些单位的不同
px:像素(pixel)相对长度单位,,是相对于屏幕显示器分辨率而言的;
em:em的值并不是固定的,会集成父级元素的字体大小;
注意:
1.body选择其中声明Font-size=62.5%;
2.将原来的px数值除以10,然后换上em作为单位;
3.重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
任何浏览器默认字体大小都是16px,所有未经调整的浏览器都符合1em=16px,南无0.75em=12px,10px=0.625em。为了简化Font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em的值变为16px*62.5%=10px,这样12px就是1.2em,10px就是1em,也就是将原来的px数值除以10换上em的单位就可以了。
rem:相对单位,(root em 即rem),使用rem为单位设置字体大小时,是相对于HTML根元素的大 小,可通过该根元素就成比例的修改调整所有字体大小,一般用的时候都是写在body或html上面,
body{fontsize:625%;}也就是1rem=100px;
不过在写项目的时候最好搭配媒体查询一起,比如:
html{font-size:10px} 10px==62.5% @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}} @media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}} @media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}} @media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}} @media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}} @media screen and (min-width:800px){html{font-size:25px}}
vw:视口的最大宽度,1vw=视口宽度的百分之一;
vh:视口得最大高度,1vh=视口高度的百分之一;
vmin/vm:相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin(即vm)。
CSS的一些单位,如rem、px、em、vw、vh、vm的更多相关文章
- css单位介绍em ex ch rem vw vh vm cm mm in pt pc px
长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和" ...
- CSS 中的rem,em,vh,vw一次说清楚
关于css中的长度单位,我们用的最多就是px,因为他简单直接.但是当一套方案匹配不同终端时,px就会显得过于生硬,不容易变通. 然而rem,em,vh,vw就可以有效的解决这一问题.让我们来看看这些东 ...
- 关于将px转换为vw vh的解决方案
什么是vw(Viewport Width)和vh(Viewport Height)? vw和vh是前端开发中的一个动态单位,是一个相对于网页视口的单位. 系统会将视口的宽度和高度分为100份,1vw占 ...
- rem布局原理深度理解(以及em/vw/vh)
一.前言 我们h5项目终端适配采用的是淘宝那套<Flexible实现手淘H5页面的终端适配>方案.主要原理是rem布局.最近和别人谈弹性布局原理,发现虽然已经使用了那套方案很久,但是自己对 ...
- 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)
原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...
- CSS中的 REM PX EM
px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的 em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. ...
- 视区相关单位vw, vh ,vm,CSS/CSS3长度、时间、频率、角度单位大全
一.CSS长度值 em 相对于父元素的字体大小 ex 相对于小写字母"x"的高度 gd 一般用在东亚字体排版上,这个与英文并无关系 rem 相对于根元素字体大小 vw 相对于视窗的 ...
- css中px,em,rem,rpx的区别
今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...
- 02_css3.0 前端长度单位 px em rem vm vh vm pc pt in 你真的懂了吗?
1:废话不多说,直接看如下图表: 2:px就不过多介绍了,就是像素点的大小,加入您的屏幕分辨率为1920,则每一个相当于每一个有横着的1920个像素点: 3:em 为相对单位,一般以 body 内的 ...
- px,em,rem的关系
之前听人说过,网站制作中字体单位应该用em而不用px,为什么呢?原因简单来说就是em支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应.px是绝对单位,不支持IE的缩放, ...
随机推荐
- HTTP请求状态码为400时的原因
2019-11-30 出现这个请求无效说明请求没有进入后台服务器里 原因: (1)前端提交的字段名称或者字段类型和后台的实体类不一样 或者前端提交的参数跟后台需要的参数个数不一致,导致无法封装 (2) ...
- 分享一个linux系统中循环遍历两个数组内容,并输出数组中的不同内容的shell脚本
cat diffarray.sh #!/bin/bash arry_list1=(1 2 3 4 5 6 7 8 9) arry_list2=(3 5 8) declare -a diff_list ...
- oracle跟SQL Server 2005 的区别
Oracle与Sql server的区别 一直搞不明白Oracle数据库和sql server的区别,今天我特意查资料把他们的区别整理出来 Oracle数据库:Oracle Database,又名 ...
- 小z的洞穴之旅 QDUOJ 并查集+连通块
小z的洞穴之旅 QDUOJ 并查集+连通块 原题链接 题意 小 z 同学在某个闲暇的周末决定去野外探险一波,结果在丛林深处中误打误撞进入了一个神秘的洞穴,虽然洞穴中光线昏暗,但小 z 凭借其敏锐的眼力 ...
- JProfiler> ERROR: Invalid license key. Aborting.
用IDEA+Tomcat的方式打开JProfiler,出现错误 1,Event Log 出错 16:10 Application Server was not connected before run ...
- 安装最新版Elasticsearch报错
1 问题:ERROR: bootstrap checks failed max file descriptors [4096] for elasticsearch process likely too ...
- 分布式之redis(转发)
为什么写这篇文章? 博主的<分布式之消息队列复习精讲>得到了大家的好评,内心诚惶诚恐,想着再出一篇关于复习精讲的文章.但是还是要说明一下,复习精讲的文章偏面试准备,真正在开发过程中,还是脚 ...
- SPA(单页面应用)和MPA(多页面应用)
话不多说,直接看图,一目了然
- 一、left
一.left - right 就是遍历(以左边遍历,以右边遍历) inner join 就是求公共部分的结果集 left join 查询结果 right join结果 inner join 解决的办法 ...
- 磁盘IO性能优化-实践
RAID卡缓存策略调整 原因详解 操作实例 I/O 调度算法 文件系统journal 磁盘挂载参数 操作实例 性能数据对比 RAID卡缓存策略调整 可以将RAID卡缓存策略由No Write Cach ...