发表于： 2016-08-03 23:52:48
0 1459
完成事项：
1.勉强完成字体自适应，让字体随着屏幕变化,通过以下方式：
html{font-size:4px;}
body{font-size:3vw;}
p{font-size:90%;}（body下的各级块元素用百分比）；
2.学习了媒体选择和rem ,但自己用时发现还是不能让字体自适应，试验的代码（无法自适应）如下，请各位大侠帮忙看看问题在哪：
<html>
<head>
<style type="text/css">
<meta name="viewport" content="width=divice-width,initial-scale=1, maximum-scale=1 />"
@media screen
and(min-width:120px)
and(max-width:349px)
{html{font-size:12px}}
@media screen
and(min-width:350px)
and(max-width:399px)
{html{font-size:15px}}
@media screen
and(min-width:1000px)
and(max-width:1499px)
{html{font-size:18px}}
@media screen
and(min-width:1500px)
and(max-width:1999px)
{html{font-size:55px}}
body
{
margin:0px;
width:100%;
}
div#img1
{
margin:10%;
}
div#p1
{
color:black; font-family:"SimHei"; font-size:1.5rem; position:absolute; left:4vw; top:5vw;
}
</style>
</head>
<body>
<div id="img1">
<img src="https://github.com/Lydia691288/text.1/blob/master/task3.2.png?raw=true" width="30%"/>
</div>
<div id="p1">中国</div>
</body>
</html>
未完成：切出来的图片背景色不是透明，问了群里前辈说用切图的时候图层去掉，还未来得及试验，明天试一试；
明天计划：Task3未完成的地方继续，task4写完；
返回列表
评论