不同分辨率下效果图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<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>
/*考虑到练习,写在一起比较好移动,真正做项目时还是要有样式表*/
* {
padding: 0rem;
margin: 0rem;
}
html {
/*谷歌浏览器写62.5%会有一点兼容问题..为了谷歌.改一下倍率吧.*/
font-size: 625%;
font-family: "微软雅黑";
}
body {
/*其实就当16px这么用了.因为设置了625%直接减去两位就可以按px方法做了*/
font-size: .16rem;
}
div {
/*box-sizing:border-box;设置了边框也没有把DIV变大,太棒了~*/
box-sizing: border-box;
}
img {
display: block;
max- 100%;
}
#img1 {
margin: 0 auto;
6.4rem;
}
.divleft {
border: solid 0.01rem #808080;
50%;
background-color: aliceblue;
float: left;
}
.divright {
50%;
border: solid 0.01rem #000000;
background-color: antiquewhite;
float: left;
}
.container {
max- 6.4rem;
margin: 0 auto;
}
footer {
margin-top: 0.1rem;
100%;
background-color: #eee;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<header>
<span>在于有关的和我人灯光,类似因,.要 灰色 要. 为了村在人仍,困难在吧伙伴2.. 中要要求要.</span>
</header>
<article>
<div class="divleft"><img id="img1" src="img/4.jpg" /></div>
<div class="divright"><img id="img1" src="img/2.jpg" /></div>
<div class="clear"></div>
</article>
<footer>
关于
</footer>
</div>
</body>
</html>