响应式和自适应

自适应

自适应是指块级元素的宽度是根据浏览器的宽度来自动调整的。

.container {
  width: 80%;
  margin: 0 auto;
}

方案: 可以使用淘宝无限适配方案，通过淘宝的flexible.js来实现。

响应式

响应式是指根据不同的设备来显示不同的样式。

当数据量不多，用户量不多时，展示类的例如官网，博客等，可以使用响应式。

添加太多媒体查询会导致代码量过大，不利于维护，且加载速度会变慢。

媒体查询

示例：

@media screen and (max-device-width: 400px) {
  .column {
    float: none;
    width:auto;
  }

  #sidebar {
    display:none;
  }
}

以上也就是说：

如果屏幕宽度小于400像素，就取消column的浮动，

宽度自动调节 (width:auto),

sidebar块不显示 (display:none)。

性能优化

1. 使用srcset属性，可以根据屏幕的分辨率来加载不同的图片。
2. 使用picture标签，可以根据不同的屏幕加载不同的图片。

<picture>
  <source media="(min-width: 650px)" srcset="pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="white_flower.jpg">
  <img src="orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

默认会加载orange_flowers.jpg图片; 当屏幕宽度大于650px时，加载pink_flowers.jpg图片; 当屏幕宽度大于465px时，加载white_flower.jpg图片。

布局方案

1. pc + 移动端的布局方案：

   • 两套代码，通过user-agent来判断是pc端还是移动端。
   • 通过media query来判断是pc端还是移动端。
   • 通过flex布局来实现。
   • 通过grid布局来实现。
   • 通过vw和vh来实现。
   • 通过rem和em来实现。
   • 通过flexible.js来实现。

   适合pc端和移动端的布局差异较大，并且访问量比较大的网站。

   pc端会加入一点响应式，移动端则使用自适应。

2. pc的设计图

   ui：1980px；

   笔记本电脑：1440px；

   ui图的宽度和电脑的宽度有一定的差距，可以通过将ui图等比例缩小来适应电脑的宽度。

3. 移动端的设计图

   ui：750px；

   750px/2 = 375px；正好是iphone6的宽度，将iphone6的宽度作为设计图的基准点。