[西安|荣耀师兄]UI-阮少凡|2018年11月05日的日报-技能树.IT修真院

发表于： 2018-11-05 21:39:32

1 616

今天完成的事：

1.【移动端适配】为什么根元素font-size设置成100px或625%

rem：是一个相对单位，相对根元素字体大小的单位，再直白点就是相对于html元素字体大小的单位。
优点：这样在计算子元素有关的尺寸时，只要根据html元素字体大小计算就好。不再像使用em时，得来回的找父元素字体大小频繁的计算，根本就离不开计算器。
首先看下图：html的字体大小设置为font-size:62.5%原因：浏览器默认字体大小是16px，rem与px关系为：1rem = 10px，10/16=0.625=62.5%，为了子元素相关尺寸计算方便，这样写最合适不过了。只要将设计稿中量到的px尺寸除以10就得到了相应的rem尺寸，方便极了。当然，直接将html元素设置为10px，也是可以的。
但是为什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？
因为有些浏览器默认的不是16px，或者用户修改了浏览器默认的字体大小（因浏览器分辨率大小，视力，习惯等因素）。如果我们将其设置为10px，一定会影响在这些浏览器上的效果，所以最好用绝大多数用户默认的16作为基数 * 62.5% 得到我们需要的10px。

实际项目设置成 font-size: 62.5%可能会出现问题，因为chrome不支持小于12px的字体，计算小于12px的时候，会默认取12px去计算，导致chrome的em/rem计算不准确。

然而，在大部分现代浏览器都没有问题，但是，谷歌font-size:62.5%刚好是10像素，而谷歌是不支持小于12像素的字体的，所以，谷歌无形当中将所有的rem全部变大了。这下麻烦了，所有的地方都错位了。chrome在字体小于12px时都当12px 处理，也就是设置62.5%相当于设置成了75.0%。但是在除的时候又是除的10得到rem值，那么当然错位。
针对这个现象，可以尝试设置html字体为625%，即100px，body 修正为16px，这样 0.1rem 就是 10px，而body的字体仍然是默认大小，不影响未设置大小的元素的默认字体的大小

2.完成task3的div页面布局.代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <link rel="stylesheet" href="../css/task3.css">
    <meta name="viewport" content="width=device-width", initial-scale=1, user-scalable=no,>
</head>
<body>
<div class="back">
    <img src="../img/logo1.png" alt="">
</div>
<div class="grape">
    <img src="../img/logo2.png" alt="">
</div>
<div class="text">
     葡萄藤轻游专注于桌游领域，提供在线杀人游戏，捉鬼，炸狼堡等多种聚会游戏，以下线下聚会桌游道具。
</div>
<div class="person">
     <img src="../img/logo3.png" alt="">
    <p>290569033</p>
</div>
<div class="grape2">
     <img src="../img/logo4.png" alt="">
     <p>BJPTTeng</p>
</div>
</body>
</htm>

CSS样式代码如下：

html{
    Font-size:625%
}
body{
    background-color: #68cdd5;
}
.back{
    margin-right:0.04rem;
    margin-top:0.04rem;
}
.grape{
    text-align:center;
    margin-top:0.1rem;
    margin-bottom:0.1rem;
}
.text{
    color:#ffffff;
    margin-left:10%;
    margin-right:10%;
    Font-size:0.19rem
}
.person{
    text-align:center;
    margin-top:15%;
    margin-left:13%;
    float:left;
    Font-size:0.15rem;
}
.person p{
    color:#ffffff;
}
.grape2{
    text-align:center;
    margin-top:15%;
    margin-right:13%;
    float:right;
    Font-size:0.15rem;
}
.grape2{
    color:#ffffff;
}