大家知道使用div css像素吗?如果不知道的赶紧看看我们给大家整理出来的教程
在我做这项研究之前,我一直使用像素来设置我的字体大小。这是因为现在的大多数浏览器允许用户在字体太小的情况下自行放大页面,所以使用像素并没有什么问题。
但是,我发现这种方式在很大程度上限制了扩展能力。虽然我的字体在中小屏幕上看起来不错,但他应该在大屏幕上有更好的优化。即便用户有放大的选项,这也不应该是我们希望他们来做的事情。
因此我使用rem设置的解决方案是(使用像素作为备用)。
CSS Code复制内容到剪贴板
html {
font-size: 62.5%; /* sets the base font to 10px for easier math */
}
body {
font-size: 16px;
font-size: 1.6rem;
/* sets the default sizing to make sure nothing is actually 10px */
}
h1 {
font-size: 32px;
font-size: 3.2rem;
}
这样我扩大了字体大小而只需要这样写——
CSS Code复制内容到剪贴板
@media screen and (min-width: 1280px) {
html {
font-size: 100%;
}
}
这个方法是用像素作为降级单位因为IE8及以下不支持rem。这有一个问题是当我改变基础字体大小时只能应用在可扩展性大小上面而不适用于后备字体大小。不过我不认为这是一个巨大的问题,因为这个问题对于较大规模的设备的核心来说只是一个额外的问题。
如果你有任何关于如何改善这个问题的想法,请在评论里让我知道。我也可以写一个SCSS的混入,这样我可以不必输入这两个后备和rem单位。
使用div css像素精彩内容就到这里了!希望大家可以好好利用!
相关推荐:
如何提高CSS网页渲染效率呢