长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和"百分比单位". 绝对单位:px in cm mm 相对单位:em rem  pt pc ex ch 百分比单位:vw vh vm % 下面主要说几个常用的单位 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体…

关于css中的长度单位,我们用的最多就是px,因为他简单直接.但是当一套方案匹配不同终端时,px就会显得过于生硬,不容易变通. 然而rem,em,vh,vw就可以有效的解决这一问题.让我们来看看这些东西是个啥? 首先是rem,W3C官网描述是"font size of the root element",即rem是相对于根元素.概念不好理解接咋们就直接直接看demo: DOM结构如下: CSS 代码如下: 效果如下:     现在对于rem是否有了点认识,设置html的font-siz…

什么是vw(Viewport Width)和vh(Viewport Height)? vw和vh是前端开发中的一个动态单位,是一个相对于网页视口的单位. 系统会将视口的宽度和高度分为100份,1vw占用视口宽度的百分之一,1vh占用视口高度的百分之一. vw.vh和百分比不同的是,百分比永远都是以父元素为参考,而vw.vh是以视口作为参考. 结论:vw.vh是一个动态的单位,会随着视口的变化而变化(相对单位). 我个人在做Vue项目的时候,一边想用vw.vh进行布局,一边又觉得px布局方便,因为…

一.前言 我们h5项目终端适配采用的是淘宝那套<Flexible实现手淘H5页面的终端适配>方案.主要原理是rem布局.最近和别人谈弹性布局原理,发现虽然已经使用了那套方案很久,但是自己对rem的理解很含糊, 包括vw.vh等.所以打算写博客总结一下,以加深理解. 二.几个概念 这里就不讲那些,物理像素.设备像素比了,可以自己查阅.要去理解rem/em/vm/vh等,首先要直观的去理解他们到底是什么?理解好了,后面就好办了.其实这几个都是css单位,就像我们常用的px一样,只不过他们都是相对单…

原文转载:https://blog.csdn.net/sinat_17775997/article/details/81020417 一.媒体查询 不同物理分辨率的设备,在还原设计稿时,css中设置的px所对应的物理像素是不同的,css像素并不是一个固定宽度. 如设计稿总宽100px,屏幕视窗物理像素1000px,如果要设置设计稿沾满屏幕,那么css中设置的1px=1000/100物理像素. 因此通过一套样式,是无法实现各端的自适应.由此我们联想: 如果一套样式不行,那么能否给每一种设备各一套不…

px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的 em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. em相对于父级元素! 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5…

一.CSS长度值 em 相对于父元素的字体大小 ex 相对于小写字母"x"的高度 gd 一般用在东亚字体排版上,这个与英文并无关系 rem 相对于根元素字体大小 vw 相对于视窗的宽度:视窗宽度是100vw vh 相对于视窗的高度:视窗高度是100vh vm 相对于视窗的宽度或高度,取决于哪个更小 ch 相对于0尺寸 px 相对于屏幕分辨率而不是视窗大小:通常为1个点或1/72英寸 in inch, 表英寸 cm centimeter, 表厘米 mm millimeter, 表毫米 p…

今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在国外网站中经常被使用.那么px,em怎样区分呢? 1.px像素(Pixel),相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 2.em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(16px) 任意浏览器的默认字体高都是1…

1:废话不多说,直接看如下图表: 2:px就不过多介绍了,就是像素点的大小,加入您的屏幕分辨率为1920,则每一个相当于每一个有横着的1920个像素点: 3:em 为相对单位,一般以 body 内的 font-size 为基准进行定义,默认值 1em = 16px,假如说我们想使用 “1em” = “10px” 来取代默认值 “1em” = “16px”,应写如下代码: body { font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/ } h1 { font…

之前听人说过,网站制作中字体单位应该用em而不用px,为什么呢?原因简单来说就是em支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应.px是绝对单位,不支持IE的缩放,而em是相对单位支持字体缩放. 而rem是一个更好的东西.如果没有兼容IE8的顾虑(rem需要IE8+才支持,rem适用于多语言模版的网站),rem可以说是一个非常理想的单位.rem和em一样是相对单位,只是有别于em相对于父元素,rem相对于根元素html,即root em.在网页设计中我们经常看…