hoto by Charles Deluvio on Unsplash
我决定写这个博客的目的是希望探索更多有关使用CSS调整大小的方法。 有这么多种可能性,很容易感到不知所措和困惑。 浏览器当前支持16种度量单位:像素,英寸,皮卡,厘米,毫米,点,百分比,em,rem,视口尺寸(vw,vh),ex,ch,Vmax(最大视口)和vmin (viewportmin)在这16个单位中有两类:相对长度和绝对长度。
首先要了解相对长度,它们会在其他物体上获得尺寸,这些尺寸在您要设定尺寸的元素之外或相对于它们,例如,父级的尺寸,字体大小和视口尺寸。
百分比基于其父元素。 因此,如果一个元素为200px * 200px,并且该元素的子元素的宽度为50%,高度为50%,则该子元素的等效尺寸为100px * 100px,因为200px的50%为100px。
在这里,我们有一个名为" parent-box"的div元素和一个名为" child-box"的子div元素。
在css文件中,我将父盒的高度和宽度设置为200px,子盒的宽度和高度设置为50%,这意味着现在子盒将是父盒尺寸的50%,因此 如果父框为200px * 200px,则表示子框为100px * 100px,结果如下:
如您所见,蓝色元素(即子元素)正好是粉红色框(即父元素)的50%。
当前有四种类型的视口尺寸单位,vw(视口宽度),vh(视口高度),vmin(视口最小)和vmax(视口最大)。 使用这些单位时要知道的第一件事是,它们会自动将浏览器的屏幕划分为100 x 100的不可见网格,网格中的每个正方形或单位将根据情况代表一个vw,vh,vmin或vmax。
因此,让我们更深入地研究这两个。 如果我们声明一个元素的宽度为50vw且高度为50vh,我们将看到该元素将恰好占据页面高度的一半,并且占据页面宽度的一半,每个vw或vh现在相当于那个不可见的100 *中的一个单元 100,所以如果我们声明一个元素为50vw,它将是浏览器宽度的一半,下面我们来看一个示例。
在这里,我们看到父元素恰好是浏览器高度和宽度的一半。
这些单位比较棘手。 因此,这些单元的工作方式是将使用高度或宽度的最大或最小长度。 例如,让我们声明父框的宽度为50vmax,如果浏览器的宽度为800px,高度为500px,则父框的宽度为400px,因为宽度大于高度,所以 元素将从浏览器的水平部分的不可见网格中获取50个单位,现在,如果高度为1000px,宽度为500px,则父框的宽度现在为500px,因为浏览器的高度现在大于宽度,因此父元素 box将占据浏览器垂直边100平方中的50平方,并使用它来声明父对象的框宽。
现在进入vmin。 假设我们声明父级框的宽度为50vmin,那么从最小视口尺寸开始,父级框的宽度将占据50个网格单位。 同样的示例,如果浏览器的宽度为800px,高度为500px,则父框的宽度现在将为250px,因为我们声明父框的宽度为最小视口尺寸的50个单位, 在这种情况下,是高度。 现在,如果高度为1000像素,宽度为600像素,则父框的宽度现在为300像素,我知道这非常令人困惑,因此让我们回到第一个示例:
Here we declare the width to be 50vmax (50 units out of 100 from the BIGGEST viewport dimension)
这样看起来像这样:
我们可以看到父框现在恰好是浏览器宽度长度的一半,这是因为浏览器的宽度大于高度。 现在,如果我们改变一切,将会得到不同的结果。
Here we declare the width to be 50vmin (50 units out of 100 from the SMALLEST viewport dimension)
所以看起来像这样:
我们可以看到父框现在恰好是浏览器高度的一半,这是因为浏览器的高度小于宽度。
我从未使用过这些单元,但让我们看看它们是如何工作的。 所以首先让我们从ex开始。 这个单位测量您正在使用的任何字体系列的字母" X"的高度,这是指字母" X"的高度? 因此,如果此" X"的高度为10px(字面的字母为" X"),则1ex将为10px,假设您使用的是另一个字体系列中的" X",其中" X"的高度为9px,所以现在1ex 是9px。
ch的行为方式非常相似,不同之处在于1ch的长度将基于字体家族的字母" O"的宽度,因此,如果字母" O"的宽度为5px,则1ch将等于5px 。
此单位响应父元素的字体大小,因此,如果父元素的字体大小为10px,则每个em现在等于10 px。
在这里,我们在父框内声明一个10px字体大小,并将子元素的宽度和高度设置为5em,因此,如果父元素的字体大小为10px,则意味着每个em值10px,因此我们的子元素将为50px * 50像素
em的作用是它们级联,这意味着什么? 因此,如果子元素内有另一个元素,并且将其尺寸设置为5em,则第二个子元素将为100px * 100px
发生这种情况的原因是,当一个孩子中有另一个元素时,第二个孩子会将值乘以2,疯狂吗? 这就是为什么在使用em时我们必须小心。
现在,rem与em有所不同,因为rem基于根字体大小而不是父字体来确定其尺寸。 rem一词的意思是" root em",这解决了我们在em元素级联时遇到的问题,通过基于root取其维度,rem值在整个文件中都相同。 因此,让我们看一下相同的示例,但带有rem。
因此,如果将本示例与上面的示例进行比较,我们可以看到父框的字体大小现在为30,但是第一个和第二个子控件的字体大小较小,我们还可以看到元素没有级联, 是因为以10px的字体大小声明了根,所以无论何时我们现在使用rem,它都将始终引用10px。
绝对长度不会根据其他因素或页面,父级,视口等其他因素来决定其大小。
因此,我觉得关于这些度量单位的解释很多。 如果您将某物声明为1in,则无论屏幕大小如何,该值都将为1in。 厘米和毫米也一样
因此,points和picas是印刷术语。 point是1/72英寸,因此很小,12点活字就是12点或1/6英寸。
最后但并非最不重要…
现在,像素是绝对长度,但是它们的大小可能取决于您所使用的设备,某些设备的像素比其他设备大,这取决于它们的密度和分辨率。
(本文翻译自Sebastian Delima的文章《CSS: Units Of Measurement (px, em, rem, vw, %, etc.)》,参考:https://medium.com/swlh/css-units-of-measurement-px-em-rem-vw-etc-ed8522620775)
家好,很高兴又见面了,我是"高级前端进阶",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!
ai2html 是 Adob?e Illustrator 的开源脚本,可将 Illustrator 文档转换为 html 和 css,基于 ai2html 的诸多示例登上了 New York Times。
ai2html由不同的组成部分:
目前 ai2html 在 Github 上开源,是一个值得关注的 AI 类前端开源项目。
很多人会有此疑问,为什么不直接将 Illustrator 文件导出为图像或 SVG?
图像和 SVG 中的文本会随着图像的缩放而缩放,因此当艺术品缩小时,文本很快就会变得难以辨认,或者在放大时看起来非常大。
通过将文本渲染为 html,可以上下缩放“图形”同时保持文本在相同的字体大小和行高下可读,从而适应从手机到巨型桌面显示器的视口。
可以打开链接 http://nyti.ms/1CQdkwq ,然后查看页面时更改窗口大小,此时将看到图稿比例变化,但文本保持相同大小。 更多示例可以查看 https://del.icio.us/archietse/ai2html+responsive
同时,当 Illustrator 保存 SVG 时,每一行文本都会被分解为单独的 SVG 元素,这使得编辑文本变得非常困难。 通过以 HTML 形式渲染文本,编辑人员可以更轻松地进入 CMS 并进行编辑,而无需费力地浏览一堆 SVG 代码。
当然,ai2html 也有一定的局限性,主要体现在以下几点:
将 ai2html 的 CDN 文件下载保存到电脑,下载地址已经在文末给出。
将 ai2html.js 文件移动到脚本所在的 Illustrator 文件夹中。 例如,在运行 Adobe Illustrator CC 2015 的 Mac 上,路径为:
/Applications/Adobe Illustrator CC 2015/Presets/en_US/Scripts/ai2html.js
接着按照以下步骤使用 ai2html:
http://ai2html.org/
https://github.com/newsdev/ai2html
https://raw.githubusercontent.com/newsdev/ai2html/master/ai2html.js
端开发过程中,尺寸单位是我们必须用到的,下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍
在这之前,需要先对几个概念进行普及介绍
基本概念
(以下概念读起来可能有些晦涩,如果看不懂也没关系)
像素
它不是自然界的物理长度,指基本原色素及其灰度的基本编码。
css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的。
在为桌面浏览器设计的网页中,我们无需对这个津津计较,但在移动设备上,必须弄明白这点。
在早先的移动设备中,屏幕像素密度都比较低,如iphone3,它的分辨率为320x480,在iphone3上,一个css像素确实是等于一个屏幕物理像素的。
后来随着技术的发展,移动设备的屏幕像素密度越来越高,从iphone4开始,苹果公司便推出了所谓的Retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。
物理像素
它是显示器(电脑、手机屏幕)最小的物理显示单位,物理像素指的是显示器上最小的点。物理像素的大小取决于屏幕。是一个无法改变的属性。
设备独立像素
我上一张图,你就会理解什么是设备独立像素
就是我们开发过程中使用的css中的px
设备像素比(device pixel radio)
设备像素比=物理像素 / 设备独立像素,单位是dpr!(device pixel radio)
Retina屏幕
所谓“Retina”是一种显示标准,是把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度。也被称为视网膜显示屏 ——百度百科
因为Retina屏幕的出现,在pc端默认情况下,css中的1px等于1物理像素,但在移动端1px不一定等于1物理像素,比如说iPhone的设备独立像素是375 667,因为它使用了Retina屏幕,他的dpr是2,所以iPhone 6 的物理像素为 750 1334
在不同的屏幕上(普通屏幕 vs retina屏幕),css中1px所呈现的大小(物理尺寸)是一致的,不同的是1px所对应的物理像素个数是不一致的。
在普通屏幕下,1px 对应 1个物理像素(1:1)。 在Retina屏幕下(dpr=2),1px对应 2x2个物理像素(1:4)。
你会发现,在移动端开发中使用了图片(img标签),2倍图要比1倍图清晰,就是这个缘故
px
默认情况下像素px是相对于屏幕分辨率而言,比如说我们的屏幕分辨率是1440 X 900,说的就是像素1440px X 900px;
这里会遇到另一种情况
### 浏览器缩放
缩放是缩放CSS像素(缩放比例为1时,一个CSS像素等于一个屏幕像素),就是在屏幕分辨率不变的情况下,用户对浏览进行了缩放
强调一点,用户的缩放行为是对浏览器进行的,缩放的是css像素,而非分辨率,分辨率是屏幕的分辨率,不论你怎么缩放当前页面,屏幕分辨率都不会改变
我们知道在移动端可以在一定程度上控制用户的缩放行为,也可以禁止用户缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0">
content属性值 :
但是在pc端就麻烦了
windows:
mac:
由于浏览器菜单栏属于系统软件权限,没发控制,我们可以通过js控制ctrl/cammond + +/- 或 Windows下ctrl + 滚轮 缩放页面的情况
em
本人在实际开发过程中并没有使用过em单位,但是后面要说的rem是基于em的,所以,对em进行简单介绍
em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
看个栗子吧
<body> <style> html { font-size: 50px; } .my-div { width: 100%; height: 500px; margin-top: 50px; background-color: gray; font-size: 40px; } .my-div .parent-font { font-size: 30px; } .my-div .parent-font .child-font { font-size: 0.5em; } </style> <div class="my-div"> <p class="parent-font"> 我是父级文字 <span class="child-font">我是子级文字</span> </p> </div> </body>
html代码中,
第一级,html的 font-size: 50px;
第二级,my-div 的 font-size: 40px;
第三级,parent-font 的 font-size:30px;
第四级,child-font 的 font-size: 0.5em;
我们通过浏览器查看,发现第四级的fong-size为15px;
我们取消第三级parent-font 的字体大小
我们通过浏览器查看,发现第四级的fong-size为20px;
当我们取消第三级font-size后,第三级的字体大小为40px;
所以我们说em的字体大小不是固定的,em的大小取决于父级的字体大小
当父级的字体大小为20px,子级的1em就是20px
当父级的字体大小为30px,子级的1em就是30px
那么说font-size存在着继承父级的特点
我们在第一级html中设置font-size,第二级继承第一级,第三级继承第二级,第四级继承第三级,以此类推
每一级都继承自它的父级,也就是说每一级的em所代表的px大小都不是固定的,因为他们的父级不是同一个,所以em的应用场景并不多。
那么如果是em的都继承自同一个地方,是不是可以解决很多问题呢?
这时候rem出现了
rem
rem 是CSS3的一个相对单位(root em,根em)
使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素
只要html的font-size大小不变,1rem所代表的font-size大小就不会变,rem只取决于html的font-size
rem解决了哪些问题
移动设备的宽度是各种各样的,每个设备的dpr也不同,换句话说就是不同设备每一行的物理像素数不同,能显示的css的px数也不同,
如果我们写一个div,宽度是375px,375px在这个屏幕(iPhone6)上是刚刚满屏,因为这个屏幕宽度刚刚是375px( 设备独立像素),
当我们换另一个宽度是414px的设备(iPhone6Plus)时,这个宽度375px的div就无法铺满这个屏幕,同样的当换一个iPhone5(320px),又会出现滚动条,安卓机的宽度更是五花八门,使用media媒体查询不靠谱,因为它不能覆盖所有的机型宽度
我们之前说rem的大小是相对于html的font-size的,如果html的font-size根据不同设备的宽度做动态计算,问题就会得到解决
我们写页面都是根据UI设计稿来做的,我们假设UI设计稿的宽度是750px(750px是常规宽度,当然也可以是640px或是其他宽度,但是整个项目,宽度必须统一),唯一不变就是就屏幕宽度,我们的html的font-size(rem)只取决于设备宽度
于是
document.documentElement.style.fontSize=100 * ( document.documentElement.clientWidth / 750) + 'px'
html的font-size:document.documentElement.style.fontSize
设备的宽度:document.documentElement.clientWidth
750:UI设计稿的宽度
为了方便计算我们将font-size x 100,方便计算(乘100不是必须的,我接触过一些项目就不是乘以100,但是UI设计稿中使用了sketch做了动态计算,但我还是建议乘100,不然遇到psd的设计图就很麻烦了)
对上面的js做些完善
const fontFun=function () { let docEl=document.documentElement let resizeEvt='orientationchange' in window ? 'orientationchange' : 'resize' const recalc=function () { let clientWidth=docEl.clientWidth if (!clientWidth) return docEl.style.fontSize=100 * (clientWidth / 750) + 'px' } if (!document.addEventListener) return window.addEventListener(resizeEvt, recalc, false) window.addEventListener('pageshow', recalc, false) document.addEventListener('DOMContentLoaded', recalc, false) } export { fontFun }
对以上代码不做过多解释
也可以这样写
(function(doc, win) { var docEl=doc.documentElement, resizeEvt='orientationchange' in window ? 'orientationchange' : 'resize', recalc=function() { var clientWidth=docEl.clientWidth if (!clientWidth) return docEl.style.fontSize=100 * (clientWidth / 750) + 'px' } if (!doc.addEventListener) return win.addEventListener(resizeEvt, recalc, false) win.addEventListener('pageshow', recalc, false) doc.addEventListener('DOMContentLoaded', recalc, false) })(document, window)
iPhone5(320px)下html的font-size:42.6667px,1rem=42.6667px
iPhone6(375px)下html的font-size:50px,1rem=50px
iPhone6Plus(414px)下html的font-size:55.2px,1rem=55.2px
rem是继承自html的font-size,但是小程序中没有html,那怎么办呢?
rpx
我不基于html的font-size了,我基于一个别的值就行了,你也不需要计算这个值,我给你计算了,这就是rpx。
最终的效果就是,你开发时在iphon6的设计稿上量了多少px,就写多少rpx就行了,完美适配,perfect!
*请认真填写需求信息,我们会在24小时内与您取得联系。