如何設(shè)置響應(yīng)式字體rem
1、如圖所示，通過以下javascript控制不用設(shè)備所需的 px
文章來源地址http://www.zghlxwxcb.cn/article/173.html
2、如上圖所示代碼，進(jìn)行解析
第一行：表示當(dāng)屏幕尺寸大于2560 的時(shí)候，使用固定的 200px，這個(gè)200px可以根據(jù)實(shí)際情況自行定義，【表示 1rem = 200px】
第二行：表示當(dāng)尺寸小于1460 的時(shí)候，使用固定px，同第一行一樣的功能，【標(biāo)題是1rem=74.1146px】，
注意：74.1146的計(jì)算是自行計(jì)算了，例子是因?yàn)?使用的1920尺寸計(jì)算。
第三行：寬度為1920px的時(shí)候，1rem = 100px；向下就是按照計(jì)算自行相應(yīng)的，即：【font-size:1rem】，在1920尺寸的時(shí)候?yàn)?00px，在1000尺寸的時(shí)候?yàn)?2px，就實(shí)現(xiàn)了響應(yīng)式字體了
如直接使用，復(fù)制以下 javascript 代碼到頁面即可，另外還可以使用 @media 進(jìn)行處置。
Css代碼如下：
@media screen and (min-width: 1024px) and (max-width:1100px){
body{font-size: 18px}
}
@media screen and (min-width: 1100px) {
body{font-size: 20px}
}
@media screen and (min-width: 1280px) {
body{font-size: 22px;}
}
@media screen and (min-width: 1366px) {
body{font-size: 24px;}
}
@media screen and (min-width: 1440px) {
body{font-size: 25px !important;}
}
@media screen and (min-width: 1680px) {
body{font-size: 28px;}
}
@media screen and (min-width: 1920px) {
body{font-size: 33px;}
}javascript代碼如下：
<script>
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth >= 2560){
docEl.style.fontSize = '200px';
}else if(clientWidth <= 1460){
docEl.style.fontSize = '74.1146px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
文章來源：http://www.zghlxwxcb.cn/article/173.html
到此這篇關(guān)于前端如何設(shè)置并使用響應(yīng)式,自適應(yīng)字體rem？的文章就介紹到這了,更多相關(guān)內(nèi)容可以在右上角搜索或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
