84669 Lernen von Personen
152542 Lernen von Personen
20005 Lernen von Personen
5487 Lernen von Personen
7821 Lernen von Personen
359900 Lernen von Personen
3350 Lernen von Personen
180660 Lernen von Personen
48569 Lernen von Personen
18603 Lernen von Personen
40936 Lernen von Personen
1549 Lernen von Personen
1183 Lernen von Personen
32909 Lernen von Personen
在div内有几个字,因为字外部的div的大小是变化的,所以现在需要让div内的字体大小,随着div的长宽进行压缩,或者拉伸
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...
举个例子:HTML里设置font-size,比如取这个font-size为变量 htmlSizediv里的font-size:0.875rem (htmlSize*0.875)
然后div大小变化时,获取div的实时宽度 比如这个宽度变量叫nowSize用这个实时宽度计算出html里的font-size大小: htmlSize = nowSize*0.2那么HTML的font-size现在就会随div的宽度变化,而div里的rem单位计算出的font-size也会随之变化
这里有个移动端用的自适应JS可以参考下:
//这里是随窗口大小变化 (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 = 20 * (clientWidth / 320) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
这是属于响应式的范畴,你可以使用百分比,而且完全可以百度的到的;恰好我有一份笔记,粘贴一下:
css中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
px:绝对单位,页面按精确像素展示
em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算;em不是一个固定的值。可以设置body{font-size:62.5%}
rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。
vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。
vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。(vmin:vw和vh中较小的那个。vmax:vw和vh中较大的那个。)
【注意】vw, vh, vmin, vmax:IE9+局部支持,chrome/firefox/safari/opera支持,ios safari 8+支持,android browser4.4+支持,chrome for android39支持
in:寸
%:百分比
cm:厘米
mm:毫米
ex:取当前作用效果的字体的x的高度,在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持,firefox/chrome/safari/opera/ios safari/android browser4.4+等均需类内属性前缀)
ch:以节点所使用字体中的“0”字符为基准,找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)
举个例子:
HTML里设置font-size,比如取这个font-size为变量 htmlSize
div里的font-size:0.875rem (htmlSize*0.875)
然后div大小变化时,获取div的实时宽度 比如这个宽度变量叫nowSize
用这个实时宽度计算出html里的font-size大小: htmlSize = nowSize*0.2
那么HTML的font-size现在就会随div的宽度变化,而div里的rem单位计算出的font-size也会随之变化
这里有个移动端用的自适应JS可以参考下:
这是属于响应式的范畴,你可以使用百分比,而且完全可以百度的到的;
恰好我有一份笔记,粘贴一下:
css中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
px:绝对单位,页面按精确像素展示
em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算;em不是一个固定的值。可以设置body{font-size:62.5%}
rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。
vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。
vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。(vmin:vw和vh中较小的那个。vmax:vw和vh中较大的那个。)
【注意】vw, vh, vmin, vmax:IE9+局部支持,chrome/firefox/safari/opera支持,ios safari 8+支持,android browser4.4+支持,chrome for android39支持
in:寸
%:百分比
cm:厘米
mm:毫米
ex:取当前作用效果的字体的x的高度,在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持,firefox/chrome/safari/opera/ios safari/android browser4.4+等均需类内属性前缀)
ch:以节点所使用字体中的“0”字符为基准,找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)