轻松的掌握在CSS3字体大小单位REM的使用
不久前,我无意中联系了WordPress主题中的字体单元REM。那时我很好奇。毕竟,我以前没有见过,所以我立刻搜索了一下信息,并进行了一次测试。
大家都知道,有很多字体单位(字体大小)在网页(字体大小),这是更常见的EM,PX,让我们比较这两个单位:
PX是一个绝对值,准确而稳定,但它的变化会影响页面的布局。
EM是一个相对值,它基于父元素的大小来计算大小。所以很难掌握。
考虑的优点和缺点很多字体单位,CSS3,REM出生。雷也相对单位(REM =根EM),很明显的是,REM是来自他们,或REM是EM的升级版,和具体的起源。我们不应该去追求它。从字体的表面看,它是这样的。
根EM相对于EM的根目录,而不是父元素,也就是说,尽管它是绝对的,但是只相对于根目录是HTML,它不会随着其他元素的变化而变化。也就是说,只要我们设置HTML文本大小就可以了。不考虑其他因素。
他也有很好的支持Chrome、Firefox、Safari、Opera,IE9 +。ie6,7,8只能用PX或EM。
xml代码将内容复制到剪贴板。
html {
字体大小:62.5%;
}
你为什么放在页面因为默认字体是16px,而16px 62.5% 10px;也就是说生活就像1rem等于10px,这是我们很好的字体大小:1.2rem,当然,为了与低版本的IE写字体兼容:12px,不要忘了写在前面的注释
这里我要提的是一点,如果你用REM来设置线的高度,比如边际单位。请把这个句子在HTML:WebKit的文字大小调整:无;Webkit来消除默认属性。否则,REM的其他部分不在根目录中作为基准值。
画布无法使用快速眼动仪的解决方案。
当我们使用画布时,我们需要设置画布的大小,即设置画布标记的宽度和高度属性。
xml代码将内容复制到剪贴板。
在移动端,画布的大小应该根据屏幕的大小进行匹配。我们一般使用REM来组合媒体查询,使用画布时会遇到一些问题:
画布的宽度属性不支持REM单元(如果您使用的是支持REM的样式,但请注意画布的宽度属性与样式宽度不同),如下所示
CSS代码将内容复制到剪贴板。
翻译方法的坐标位置,没有单位,如ctx.translate(10,10);
合适的屏幕是必要的,但如何解决呢有了最原始的百分比布局,你可以:
Javascript代码将内容复制到剪贴板。
获取屏幕宽度
无功clientwidth = document.documentelement.clientwidth;
根据帆布/帆布比例装置的设计
无功canvaswidth = math.floor(clientwidth * 200 / 720);
canvas.setattribute('width ',canvaswidth + 'px);
canvas.setattribute('height ',canvaswidth + 'px);
也可以直接传递到像素坐标。