发表于： 2016-09-29 16:26:44
1 710
今天完成的事情：学习通过使用viweport元标签来支持手机，在chrome和360浏览器中使用了F12调试。
明天计划的事情：继续研究响应式布局和手机自适应的问题，尝试任务2，上传代码到GIT上。
遇到的问题：
1.看了教程后添加了元标签，并且把width、height、padding、margin全部设置为百分比或rem，但是显示的效果却不正常了，实在不清楚为什么。
手机UC浏览器的普通模式和适应屏幕模式下效果一样。
2.不使用原标签，把宽度全部设置为px时在电脑端显示正常，但在手机端 UC浏览器的普通模式下显示正常，适应屏幕模式下显示不正常。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
.table-column
{
padding: 1rem;
margin: 1rem;
width: 100%;
height: auto;
float: left ;
}
.orange-square
{
padding:1rem;
margin: 1rem;
width:30%;
height:30%;
background-color:rgb(232,131,13);
border-radius: 1rem;
float: left;
}
</style>
<title>task1</title>
</head>
<body>
<div class="table-column">
<div class="orange-square"></div>
<div class="orange-square"></div>
<div class="orange-square"></div>
<div class="orange-square"></div>
<div class="orange-square"></div>
<div class="orange-square"></div>
<div class="orange-square"></div>
<div class="orange-square"></div>
<div class="orange-square"></div>
</div>
</html>
viweport元标签模式下：
PC端显示不正常 手机显示：普通模式和极速模式下显示相同
非元标签模式下，使用px为大小单位。
PC端显示正常 手机显示：普通模式和极速模式下显示不同
返回列表
评论