总结了一下一些单位的不同

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的更多相关文章

  1. 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 %,大概可以分为几种"绝对单位"和"相对单位"和" ...

  2. CSS 中的rem,em,vh,vw一次说清楚

    关于css中的长度单位,我们用的最多就是px,因为他简单直接.但是当一套方案匹配不同终端时,px就会显得过于生硬,不容易变通. 然而rem,em,vh,vw就可以有效的解决这一问题.让我们来看看这些东 ...

  3. 关于将px转换为vw vh的解决方案

    什么是vw(Viewport Width)和vh(Viewport Height)? vw和vh是前端开发中的一个动态单位,是一个相对于网页视口的单位. 系统会将视口的宽度和高度分为100份,1vw占 ...

  4. rem布局原理深度理解(以及em/vw/vh)

    一.前言 我们h5项目终端适配采用的是淘宝那套<Flexible实现手淘H5页面的终端适配>方案.主要原理是rem布局.最近和别人谈弹性布局原理,发现虽然已经使用了那套方案很久,但是自己对 ...

  5. 【学习笔记】响应式布局的常用解决方案(媒体查询、百分比、rem、和vw/vh)

    原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的 ...

  6. CSS中的 REM PX EM

    px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的 em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. ...

  7. 视区相关单位vw, vh ,vm,CSS/CSS3长度、时间、频率、角度单位大全

    一.CSS长度值 em 相对于父元素的字体大小 ex 相对于小写字母"x"的高度 gd 一般用在东亚字体排版上,这个与英文并无关系 rem 相对于根元素字体大小 vw 相对于视窗的 ...

  8. css中px,em,rem,rpx的区别

    今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...

  9. 02_css3.0 前端长度单位 px em rem vm vh vm pc pt in 你真的懂了吗?

    1:废话不多说,直接看如下图表: 2:px就不过多介绍了,就是像素点的大小,加入您的屏幕分辨率为1920,则每一个相当于每一个有横着的1920个像素点: 3:em 为相对单位,一般以 body 内的 ...

  10. px,em,rem的关系

    之前听人说过,网站制作中字体单位应该用em而不用px,为什么呢?原因简单来说就是em支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应.px是绝对单位,不支持IE的缩放, ...

随机推荐

  1. Visdom可视化

    Visdom是基于Pytorch的可视化工具 安装方式: pip install visdom 因为Visdom本质上是一个Web服务器,把数据渲染到网页上,因此首先需要运行这个 服务器,如下: py ...

  2. 使用使用dockerfile构建webapi镜像然后使用link和bridge两种方式进行桥接

    首先新增一个webapi的项目 项目核心代码 UserContext using Microsoft.EntityFrameworkCore; using System; using System.C ...

  3. vue项目中,无需打包而动态更改背景图以及标题

    1.背景 今天,项目经理对已完成的项目提出了一个需求,即项目的基础功能目前针对于各个基层法院都适用,而对于不同的法院,我们每次都需要前端研发来更改所属法院的法院名称以及背景图,这样对于演示者来说是非常 ...

  4. C#方法名前的方括号

    1.序列化:[Serializable]public void 方法名(){...} 2.WebServices方法:[WebMethod]public void 方法名(){...} 3.Ajax( ...

  5. 七、Zabbix-模板,应用集,监控项,触发器

    本篇内容,将模板,应用集,监控项,触发器放在一起,因为我们建立使用的监控项和触发器,大多数都是对多台机器使用的,很少有一个监控项对应一个主机的情况. 一.模板 1.什么是模板? 个人理解,模板就是模板 ...

  6. CentOSLinux安装Docker容器

    Docker 使用 环境说明 CentOS 7.3(不准确地说:要求必须是 CentOS 7 64位) 不建议在 Windows 上使用 Docker 基本概念 官网:https://www.dock ...

  7. jQuery中this与$(this)的区别总结

    这里就谈谈this与$(this)的区别. 1.jQuery中this与$(this)的区别 $("#textbox").hover( function() { this.titl ...

  8. MySQL-快速入门(2)数据类型

    1.MySQL支持多种数据类型: 1>数值类型:整数类型tinyint.smallint.mediumint.bigint.int:浮点小数类型float.double:定点小数类型decima ...

  9. Highways POJ-1751 最小生成树 Prim算法

    Highways POJ-1751 最小生成树 Prim算法 题意 有一个N个城市M条路的无向图,给你N个城市的坐标,然后现在该无向图已经有M条边了,问你还需要添加总长为多少的边能使得该无向图连通.输 ...

  10. 给定一个英文字符串,请编写一个PHP函数找出这个字符串中首先出现三次的那个英文字符(需要区分大小写),并返回

    给定一个英文字符串,请编写一个PHP函数找出这个字符串中首先出现三次的那个英文字符(需要区分大小写),并返回 //统计字符串中出现的字符的出现次数 public function strNum(){ ...