今天完成的事情
查看了资料手机端页面自适应解决方案rem布局
修改任务三的代码，把px改为rem，做了自适应，修改了咋天做出来出现了横向滚动条的情况。
修改后的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width; initial-scale=1.0;minimum-scale=1.0;
maximum-scale=1.0; user-scalable=no;">
<title>葡萄藤</title>
<style pyte="txet/css">
html {
font-size: 312.5%;
}
body {
font-size: initial;
background-color: mediumturquoise;
margin: 0;
width: 100%;
}
.task1 {
folat: left;
padding-top: 0.4rem;
padding-left: 0.4rem;
}
.task1-size {
width: 0.54rem;
height: 0.54rem;
}
.task2 {
padding-bottom: 0.3rem;
text-align: center;
margin: 5% 0
}
.task2-size {
width: 1.83rem;
height: 0.71rem;
}
.font {
color: linen;
text-align: center;
}
.task3 {
float: left;
margin: 10% 0 0 5%
}
.task3-size {
width: 0.84rem;
height: 0.84rem;
}
.task4 {
float: right;
margin: 10% 5% 0 0
}
.task4-size {
width: 0.84rem;
height: 0.84rem;
}
.font2 {
font-size: 0.01rem;
color: linen;
clear: both;
float: left;
margin: 1% 4%;
}
.font3 {
font-size: 0.01rem;
color: linen;
float: right;
margin: 1% 4%;
}
</style>
</head>
<body>
<div class="task1">
<img class="task1-size" src="task1.png">
</div>
<div class="task2">
<img class="task2-size" src="task2.png">
</div>
<div class="font">
<p>葡萄藤轻游戏专注于桌游领域，提供在线杀人游戏，捉鬼，炸狼堡等多种聚会游戏，以下线下聚会桌游道具。</p>
</div>
<div class="task3">
<img class="task3-size" src="task3.png">
</div>
<div class="task4">
<img class="task4-size" src="task4.png">
</div>
<p class="font2">290560933</p>
<p class="font3">BJPTTeng</p>
</body>
</html
效果：
明天的计划
开始任务四
遇到的问题
一开始把
运用到了通配符里面，显示的效果字体变大，font-size:312.5%，字体默认就变为50px，如果运用到通配符里面，通配符会把所有的元素都改为通配符的样式，所以通配符不推荐使用，所以显示的字体50px，显示的很大字体，把font-size:312.5放html标签下显示正常。以后劲量不适应通配符。
收获
rem就是根元素（即：html）的字体大小，html中的所有标签样式凡是涉及到尺寸的height,width,padding,margin,font-size，left,top都可以用rem作单位。
如果把html的font-size设为20px，那么1rem = 20px。如果把html的font-size设为100px，那么1rem = 100px。
个人对rem的理解，不知道对不对：
对于手机来说，手机屏幕640px的宽度是一个安全的最大宽度，iPhone5使用的是Retina视网膜屏幕，使用2px*2px的的像素代表1px*1px的css的像素，如果手机设备像素数为640*1136px，那么CSS像素数320*568px，要缩小一倍来编写，如果一张图片的分辨率为800*800，父元素的font-size:312.5%，那么css就要编写为0.8rem。运用rem来实现手机上自适应。
返回列表
评论