移动端开发rem自适应字体大小

监控java前端开发 前端开发javascript java前端开发面试

1.媒体查询设置
@media screen and (max-width: 320px) {
html {font-size: 42.8px}
}

@media screen and (min-width: 320px) {
html {font-size: 42.67px}
}

@media screen and (min-width: 360px) {
html {font-size: 48px;}
}

@media screen and (min-width: 375px) {
html {font-size: 50px;}
}

@media screen and (min-width: 385px) {
html {font-size: 51.33px;}
}

@media screen and (min-width: 400px) {
html {font-size: 53.33px;}
}

@media screen and (min-width: 414px) {
html {font-size: 55.2px;}
}

@media screen and (min-width: 450px) {
html {font-size: 60px;}
}

@media screen and (min-width: 480px) {
html {font-size: 64px;}
}

@media screen and (min-width: 540px) {
html {font-size: 72px;}
}

@media screen and (min-width: 600px) {
html {font-size: 80px;}
}

@media screen and (min-width: 640px) {
html {font-size: 85.33px;}
}

@media screen and (min-width: 750px) {
html {font-size: 100px;}
}
2.js动态设置
相比媒体查询设置更为精确

//设置根元素字体
var win = window;
doc = document;
function setFontSize() {
var winWidth = $(window).width();
//750这个数字是根据你的设计图的实际大小来的,所以值具体根据设计图的大小
var size = (winWidth / 750) * 100;
doc.documentElement.style.fontSize = (size < 100 ? size : 100) + ‘px’;
}

//这里我们给个定时器来实现页面加载完毕再进行字体设置
setTimeout(function() {
//初始化
setFontSize();
}, 100);

使用方法都一样:比如一个字体a为34px
a{
font-size:.34rem;
}

java软件前端开发 java前端开发要打代码吗 java前端开发面试题及答案

» 本文来自:前端开发者 » 《移动端开发rem自适应字体大小》
» 本文链接地址:https://www.rokub.com/5682.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!