css响应式设计知识点总结

响应式设计是指网站根据以下内容调整大小和重新组织其内容的能力：

1. 网站上其他内容的大小。
2. 正在浏览网站的屏幕尺寸。

一：相对于网站上的其它内容调整HTML内容的大小

• 使用em，相对于浏览器默认字体大小（一般为16px）来设置大小，或者相对于自己定义的字体大小来设置。
• 使用rem，相对于root元素（html）来调整内容的大小。
• 要在页面上相对于其父元素来调整非文本HTML元素的大小， 可以使用百分比来设置width和height（此时父元素的大小应该先设置好）。注意！ 因为盒子模型包含填充、边框、边距，因此设置元素的宽度为100%可能会导致内容溢出其父元素。设置width为100%时，最好当内容不包括填充、边框、边距。
• 使用百分比来设置margin或者padding，是参考父元素的width来设置的。
• 用来缩放图像和视频的响应式代码：

  .container {
    width: 50%;
    height: 200px;
    overflow: hidden;
  }
  
  .container img {
    max-width: 100%;
    height: auto;
    display: block;
  }

•  对于背景图像，要用background-size:cover\background-position:center来实现响应式设计

二、 根据使用设备屏幕大小的不同来实现响应式网页

css响应式设计知识点总结

原文：https://www.cnblogs.com/starboy13/p/13032243.html