响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。
原理就是再不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。

平时我们的响应式尺寸划分

  • 嘲笑屏幕(手机,小于768px): 设置宽度为100%
  • 小屏幕(平板,大于等于768px): 设置宽度为750px
  • 中等屏幕(桌面显示器,大于等于992px): 设置宽度为970px
  • 大屏幕(大桌面显示器,大于等于1200px): 设置宽度为1170px

设置宽度比屏幕宽度小一点点是为了更加好看,手机的话,宽度设满好看

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. .container {
  10. height: 150px;
  11. background-color: pink;
  12. margin: 0 auto;
  13. }
  14. @media screen and (max-width:767px) {
  15. .container {
  16. width: 100%;
  17. }
  18. }
  19. @media screen and (min-width:767px) {
  20. .container {
  21. width: 750px;
  22. }
  23. }
  24. @media screen and (min-width:992px) {
  25. .container {
  26. width: 970px;
  27. }
  28. }
  29. @media screen and (min-width:1200px) {
  30. .container {
  31. width: 1170px;
  32. }
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <!-- 响应式开发,首先得设置响应式布局容器 -->
  38. <div class="container"></div>
  39. </body>
  40. </html>