1，国外响应式网站收录
2，
微信图片_20190605175232.png
媒体查询：
总结，max === 小于； min === 大于
例子：1~10的屏幕宽度
@media(max-width:4px){} // 屏幕宽度 <= 4
@media(min-width:5px) and (max-width:8px){} // 5<= 屏幕宽度 <=8
@media(min-width:9px){} // 9 <= 屏幕宽度
常用在响应式网页上的屏幕段划分
段一： 所有屏幕共用
段二： @media(min-width: 767px){}
段三： @media(min-width: 960px){}
段四： @media(min-width: 1024px){}
样式分段实现步骤：
1， 大屏->小屏 写样式
2， 共用的从下往上提取，有差异的就覆盖
3，分布式规划
头部：
1）块（占整行）
默认：width : 100%
图片.png
2）占整行，左右间距设置padding
默认（屏幕小于767px）
padding: 0 28px;
屏幕大于768px
@media only screen and (min-width: 768px)
padding: 0 28px;
屏幕大于960px
@media only screen and (min-width: 960px)
padding: 0 56px;
3）高
默认（屏幕小于767px）
height:40px;
屏幕大于768px
height:70px;
4）菜单格局变化
pc大屏，横列展示，768px以上屏幕
@media only screen and (min-width:768px)
小屏，下拉，767px以下屏幕
@media only screen and (max-width:767px)
5）下拉框默认和活跃的代码设置
默认：
position: absolute;
z-index: 999;
top: 0px;
left: 0px;
box-sizing: border-box;
width: 100%;
will-change: opacity, transform;
transitio: opacity 0.15s ease-in-out, transform 0.2s ease-in-out;
opcity: 0;
transform: translateY(-50px);
pointer-events: none;
活跃：
opacity: 1;
transform: translateY(0px);
pointer-events: all;
6）字体、行间距（屏幕变化设置）
字体：根据屏幕宽度设置，单位：px
行间距： 全局html设置，line-height: 1.8em;
