响应式总结

一、响应式页面

1、响应式网站的两种形式

• 在一个网站完成不同设备的适配(企业站适合)pc端、平板端、手机端
• 通过2个或3个网站完成适配(大型网站、商城)

2、响应式网站的两种技术

• 使用原生方式写 @media （比较常用）
• Bootstrap框架市面使用量比较多自动设置好了适配

二、屏幕大小分类

1、超小屏幕 (手机，小于768px)

2、小屏幕(平板，大于等于768px)
@media(max-width:992px) { … }

3、中等屏幕(桌面显示器，大于等于992px)
@media(min-width:992px) { … }

4、大屏幕(大桌面显示器，大于等于1200h)
@media(min-width:1300px){ … } 1300是考虑了侧边滚动条的宽度

其他写法：

@media screen and (min-width: 1200px){...}

@media screen and (min-width: 800px) and (max-width: 1200px){...}

@media screen and (max- width: 800px){...}

三、具体实现思路

1、还是把PC端的界面先照旧做出来，多用弹性盒模型替代浮动

2、做响应式的时候把PC端的样式先复制过来，不变的删，要改的重新设置覆盖即可
一开始调试界面会有横向滚动条有可能是正常的，一部分一部分调节即可 */

3、做大屏幕样式时，只需要把小屏幕修改过的样式改回来即可