响应式网站

1，国外响应式网站收录

https://mediaqueri.es/

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;