试用css3 语法@media screen and (判断属性){ CSS样式选择器 }
1、DIV+CSS小案例描述
根据整体来设置，设置他们的最大宽度(width)为640px，最小宽度为320px，此类设置适用于手机移动端；要实现屏幕自适应，那么就要用百分比来实现；所以设置width整体100%；img宽度100%；这样实现图片的自由缩放；
HTML代码如下：且仔细看清每一行的注释：
2、看下实现的效果如何：文字大小是如何变化的；
变化浏览器后效果：如图
自定义缩放其实主要就是判断浏览器的宽度，高度需要的话可以设置，还有设置内部区域块儿的宽度以及图片展示用百分比来控制；
vw和vh是相对于视口（viewport，也可以叫做视区、视界或可视范围）的宽度和高度。由于现在移动设备（主要是手机）的屏幕尺寸千差万别，如果仍然根据屏幕的物理分辨率来设计网页，效果会很难统一，因此html5和css3引入视口的概念来代替显示器的物理尺寸。通过在meta标签上的设置，视口的长宽可以跟设备的物理分辨率相等，也可以不相等（以便手机上可以实现用两个手指来放大会缩小页面），可根据需要灵活掌握。在PC中，视口的长宽则是跟浏览器窗口的物理分辨率恒等的。1vw等于视口宽度（viewport width）的百分之一，也就是说100vw就是视口的宽度。同理，1vh等于视口高度（viewport height）的百分之一。
一、布局HTML：布局就是将整体的框架给搭建起来，让用户知道你的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>继承父亲的高度</title>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
二、css中如何继承父元素的高度：（1）添加CSS样式，父级盒子的高度要明确是多少，子级盒子的高度可以直接写成100%，那这样就直接继承了父级盒子的高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>继承父亲的高度</title>
<style type="text/css">
.father {
width: 200px
height: 200px
background-color: orange
}
.son {
width: 100px
/*height: 20px*/
height: 100%
background-color: teal
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
在开发工具里面的代码截图：
三、未添加样式的在浏览器渲染的截图：
四、添加了样式的在浏览器里面的渲染的截图：
