1，媒体查询和rem
使用媒体查询设置html的font-size，并且再额外使用rem设置字体大小。vw,vh设置元素宽高，rem的转换是px/font-size。
<!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"> <title>Document</title>
<style>
* { margin: 0; padding: 0; }
/* html { font-size: 100px; } */ /* 从小到大的顺序 */
@media screen and (min-width: 320px) {
html {
font-size: 50px;
}
}
@media screen and (min-width: 640px) {
html {
font-size: 100px;
}
.top {
height: 120px !important;
}
}
.top {
height: 20vh; //占据视口高度的百分之20。随窗口变化自适应
line-height: 20vh;
width: 20vw; //占据视口宽度的百分之20
font-size: .5rem;
background-color: green;
color: #fff;
text-align: center;
line-height: 1rem;
}
</style>
</head>
<body>
<div class="top">嘻嘻嘻
<img src="www.baidu.com/xxx.jpg">
</div>
</body>
</html>个人理解是公用的样式就使用rem，如果想要每种分辨率展现不同的样式，还是需要写在媒体查询里。
当然，对于宽高我们可以使用百分比进行设置，
图片的话可以使用max-width控制图片的最大宽度，同时我们需要设置height:auto；来保证图片原始的宽高比例
.top img{
max-width:100%;
height:auto;
}假设设置的是背景图片，我们可以使用css3新增的background-size来进行设置
background-size：contain; // 缩小图片来适应元素的尺寸（保持像素的长宽比）；
background-size ：cover; // 扩展图片来填满元素（保持像素的长宽比）； background-size ：100px 100px; // 调整图片到指定大小；
background-size ：50% 100%; // 调整图片到指定大小，百分比相对于包含元素的尺寸。
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。