em

Why use ems for padding & margins with browsers now scaling correctly? [closed]

夙愿已清 提交于 2019-12-02 18:19:16
问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 5 years ago . I've been wondering about this questions for some time and created a pixel version and and em version to compare the differences when zoomed in - there were none. Most of what I've read states something like "you need to make them ems for scalability" but I think it's a moot point

Is it possible to get the width of the window in em units using javascript?

£可爱£侵袭症+ 提交于 2019-12-02 17:54:24
I'm looking for a reliable way to get the width of the window in em units using javascript. I was surprised to see that jQuery will only return a result in pixel measurements. Any help is appreciated. This seems to work: $(window).width() / parseFloat($("body").css("font-size")); Here's a solution that doesn't require jQuery, and doesn't require an explicit font-size declaration. window.innerWidth / parseFloat( getComputedStyle( document.querySelector('body') )['font-size'] ) For those who need it all put together, this code works for me: <p>Window size: <span id="width_px"></span> pixels or

移动端页面的一些心得

本小妞迷上赌 提交于 2019-12-02 12:22:39
允许网页宽度自动调整 在 head 标签里加入 viewport 元标签, viewport 是网页默认宽度和高度 //网页宽=屏幕宽,原始缩放比0.5   <meta name="viewport" content="width=device-width, initial-scale=0.5" /> 不要固定宽度,字体也是    使用 width : xx % ;或 width : auto ; 在写CSS的时候,需要注意: -1. body选择器中声明Font-size=62.5%; -2. 将你的原来的px数值除以10,然后换上em作为单位; -3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。 也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。 em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。(引自CSS2.0手册) 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算

浅谈排序算法之堆排序(5)

◇◆丶佛笑我妖孽 提交于 2019-12-02 11:01:43
近日,笔者忙里偷闲,学习了下堆排序(Heap-Sort)。堆排序算法,就时间复杂度而言,堆排序跟 合并排序 (Merge-Sort)算法是一样的,都是O(n * log(n));就排序方式而言,堆排序跟 插入排序 (Insertion-Sort)一样,都具有空间原址性。 这里首先介绍下堆的概念。堆,或者称为二叉堆,可以看作是一棵近似的 完全二叉树 。在这棵树中,除了最底层以外,该树是完全充满的,而且是从左至右填充的(这里笔者手画了几个栗子)。 在二叉堆中,通常使用两个属性:length表示数组长度,heap_size表述还有多少个元素存储在二叉堆中。二叉堆一般具有两种形式:最大堆和最小堆。在最大堆中,除了根结点以外的所有结点i均满足 A [ parent ( i ) ] >= A [ i ] 即某个结点的值,至多与父结点的值相等,最大堆的最大元素存储在根结点上。而最小堆则满足 A [ parent ( i ) ] <= A [ i ] 即某个结点的值,至少都与父结点的值相等,其最小元素存储在根结点上。 在堆排序算法中,一般考虑实现最大堆。考虑随机数组排序成升序数组的栗子,堆排序算法大致流程如下: 首先将随机数组建成一个最大堆。 从数组最后一位开始向前迭代,直到第二个元素。迭代过程中,将当前最大堆的最大值(数组首)依次从数组最后一位开始向前放置。同时,heap_size自减一

响应式设计中对margin,line-height怎么使用em?

*爱你&永不变心* 提交于 2019-12-02 09:49:20
line-height,margin-top如果使用em的话,em的大小根据的是 上文的字体的大小 还是 上文的line-height的大小 决定? 测试: body: line-height:20px; font-size:16px; 1. header[role='banner'] p: line-height: 1em; font-size: .9em; 2. header[role='banner'] p: line-height: 20px; font-size: .9em; 3. header[role='banner'] p: line-height: 100%; font-size: .9em; 4. header[role='banner'] p: line-height: 16px; font-size: .9em; 测试之后,发现 line-height: 1em = line-height: 100% ≠ line-height: 16px ≠ line-height: 20px 行高变化不是很大,但确实不同 这里的 1em , 100% 不是 16px 也不是 20px 是什么情况? 来源: oschina 链接: https://my.oschina.net/u/1376301/blog/192011

CSS 单位 px、pt、em、rem

风格不统一 提交于 2019-12-02 06:44:26
1. px (pixel,像素): px即pixel(像素),是相对长度单位,根据屏幕的像素决定,最能准确还原设计图。px是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选。Windows系统默认是96dpi,Apple系统默认是72dpi。 2. pt (point,磅): pt 是印刷行业常用单位,是一个物理长度单位,指的是72分之一英寸。pt (point,磅):是一个物理长度单位,指的是72分之一英寸。 3. em em:相对单位(相对于当前对象内文本的字体尺寸),相对父元素属性的单位,一般用于移动端布局,每个子元素透过「倍数」乘以父元素的px值。最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。通常1em=16px。 相对于当前对象内文本的字体尺寸,如当前对行内文本的字体尺寸未被认为设置,则相对于浏览器的默认字体尺寸。 但em值并不固定,它会继承父级元素的字体大小。 EM特点 1. em的值并不是固定的; 2. em会继承父级元素的字体大小。 4. rem rem:是CSS3新增的一个相对单位,每个元素透过「倍数」乘以根元素的px值。结合相对定位和绝对定位的优势,相对根元素html,想要修改字体大小

使用rem布局

只谈情不闲聊 提交于 2019-12-02 05:48:57
在前端开发中,如果要对移动端的项目进行适配,可以了解一个插件,叫 hotcss.js,可以解决在不同大小的屏幕上最优显示 另外一种适配,也就是rem 与 em 相同的是它们都是使用元素设定字体大小,不同的是 em 是根据父级元素设置大小。而 rem 在根据指定 html 根元素的字符大小而定的,从IE6到Chrome中,默认根元素的 font-size 都是 16px 的。如果想要设置 12px 的字体大小也就是 12px/16px = 0.75rem 。 由于 px 是相对固定单位,字号大写直接被定死,无法随着浏览器进行缩放。 em 和 rem 都是相对单位, em 是相对于其父元素的 font-size ,页面层级越深, em 换算越复杂,麻烦。 rem 直接相对于根元素 html ,避开层级关系,移动端新型浏览器对其支持较好。 使用 1,在header里设置meta <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0"/> 2.在js中设置跟节点的大小 doument.doumentElement.style.fontSize = doument.doumentElement.clientWidth / 640 * 100

css中的单位

泪湿孤枕 提交于 2019-12-02 00:04:56
/** 单位: 1.像素px 一个像素就是屏幕中的一个小点,手机屏的像素大小是PC的四分之一 2.百分比% 子元素的宽度/高度 = 父元素的宽度/高度 * xxx% 3.em em是相对于当前元素的字体大小计算的 1em = 1 * font-size 浏览器默认字体大小是16px,若当前元素未设置字体大小,则:1em = 16px 当字体大小发生改变时em也随之改变,当需要设置字体相关的样式时,会经常使用em */ .box1 { width: 100px; height: 100px; background-color: #bd6e07; } .box2 { /*1em = 16px*/ width: 1em; /*高度为50px*/ height: 50%; background-color: #025a18; } 效果: 来源: https://www.cnblogs.com/goujian/p/11722322.html

How do i convert pt into em?

ぐ巨炮叔叔 提交于 2019-12-01 14:41:45
How do i convert pt into em? As I use Photoshop to design templates. Software is having pt format for the text size.Then I have to transfer the design details to developers, and they always need all the text sizes in em format. I referred this site http://pxtoem.com/ for the conversions, but there is only conversion for px to em. Right now I am using 16 pt for the base font. My another question is, Is there any difference between pt and px rather than its full form points per inch and pixel per inch.? Because I checked the height of 16pt size, its showing 16px in height only. EM is a relative

java高并发核心类 AQS(Abstract Queued Synchronizer)抽象队列同步器

ぃ、小莉子 提交于 2019-12-01 13:27:00
什么是AQS? 全称: Abstract Queued Synchronizer: 抽象队列同步器 是 java.util.concurrent.locks包下的一个抽象类 其编写者: Doug Lea (并发大佬, 整个j.u.c包都是他写的) 是 j.u.c 包的基础组件(核心) 我们先来读一下该类的英文说明注释: /** * Provides a framework for implementing blocking locks and related synchronizers * (semaphores, events, etc) that rely on first-in-first-out (FIFO) wait queues. * 提供了一个实现阻塞式锁 及相关的 依赖于先进先出等待队列的 同步器(如信号量, 事件...) 的框架。 * * This class is designed to be a useful basis for most kinds of synchronizers that rely on * a single atomic {@code int} value to represent state. * 该类被设计为 所有依赖于单个原子性值 来代表其状态的同步器 的基石。 * * Subclasses must define the