这样可以吗？ 是不是不专门写html的字体大小的话 rem对应的就是默认font-size的比值
来源：3-3 编程练习
慕瓜9363615
2017-11-06 21:36:06
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移动端</title>
<style>
*{
margin:0px;
padding:0px;
}
.box{
display: flex;
background:#F3F5F7;
width:100%;
}
.box-item{
flex:1;
box-sizing: border-box;
background-color: #fff;
box-shadow: 0 4px 30px 0 rgba(7,17,27,.1);
text-align: center;
border-radius: 4px;
padding: 36px 24px 10px;
margin:10px;
}
.box-item>img{
display: block;
width: 80%;
margin: 0 auto 10px;
border-radius: 50%;
}
.box-item>h1{
font-size: 1.2rem;
line-height: 24px;
color: #07111b;
}
.box-item>p{
height:56px;
font-size: 12px;
line-height: 20px;
color: #93999f;
-webkit-line-clamp: 3;
overflow: hidden;
word-break: break-all;
word-wrap: break-word;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div class="box">
<div class="box-item">
<img src="http://climg.mukewang.com/591411a400018ad902000200.jpg" alt="">
<h1>快乐动起来呀</h1>
<p>先后在360、去哪儿网、今日头条任资深前端工程师，在业务开发和工程架构方面有较多实战经验。</p>
</div>
<div class="box-item">
<img src="http://climg.mukewang.com/591411b400010aa702000200.jpg" alt="">
<h1>7七月</h1>
<p>作为微信小程序第一波开发者，他受邀编写小程序开发书籍，不久就会出版，他喜欢写代码带来成就感。</p>
</div>
<div class="box-item">
<img src="http://climg.mukewang.com/591411c0000199be02000200.jpg" alt="">
<h1>Geely</h1>
<p>Geely，丰富的互联网项目经验，公司内部技术讲师，热爱技术，乐于分享。教学格言：把复杂的技术简单化，简单的技术极致化</p>
</div>
<div class="box-item">
<img src="http://climg.mukewang.com/591411b400010aa702000200.jpg" alt="">
<h1>Scott</h1>
<p>是国内最早接触 Node.js 的工程师，也是最早用 Node.js 做开发的工程师之一，拥有大量 Node.js 全站开发经验。</p>
</div>
<div class="box-item">
<img src="http://climg.mukewang.com/591411cb0001483f02000200.jpg" alt="">
<h1>moocer</h1>
<p>曾混迹于企业应用领域，后转战电商，现奋战于互联网教育行业，转眼间已匆匆数年，喜爱技术甚于自己，至今不悔。感天地之广大，岁月之蹉跎，若能重来，仍代码。</p>
</div>
</div>
<script>
(function (doc,win){
var docE1=doc.documentElement,
resizeEvt='orientationchange' in window ? 'orientationchange' :'resize';
recalc=function(){
var clientWidth=docE1.clientWidth;
if(!clientWidth) return;
if(clientWidth<=640){
docE1.style.fontSize=(clientWidth/1000)+'px';
}
};
if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc,false);//绑定浏览器缩放与加载时间
doc.addEventListener('DOMContentLoaded', recalc,false);//当dom加载完成时，或者 屏幕垂直、水平方向有改变进行html的根元素计算
recalc();
})(document,window);
</script>
</body>
</html>
1回答
-
樱桃小胖子
2017-11-07
效果实现的是可以的，一般浏览器的默认字体大小是16px，如果不单独设置字体大小，会根据浏览器默认的字体大小来进行比值换算。希望可以帮到你~
0
相似问题