web响应式的一些方法

1.给 img标签增加样式规则使它自适应容器尺寸。应声明为块级元素，应适应它容器的宽度，应保持原本的宽高比。

2.为优化图片在高分辨率设备下的显示效果，最简单的方式是定义它们的 width和 height值为源文件宽高的一半。

img {
  max-width: 100%;
  display: block;
  height: auto;
}

3.一般依赖于媒体查询：max-width(小于或等于)，min-width(大于或等于)

@media (max-width){

p{

css样式

}

}

4.用 em或 px去设置文本大小

5.使用视窗单位还有百分比，

• vw：如 10vw的意思是视窗宽度的 10%。
• vh：如 3vh的意思是视窗高度的 3%。
• vmin：如 70vmin的意思是视窗中较小尺寸的 70% (高度 VS 宽度)。
• vmax：如 100vmax的意思是视窗中较大尺寸的 100% (高度 VS 宽度)。

6.使用Flexible Box，简称 flexbox（弹性盒子）进行元素的排列和定位。