1.响应式

图片7.png
图片2.png
图片3.png
图片4.png
图片5.png
图片6.png

1.1设备屏幕大小一般尺寸

划分设备 尺寸区间
超小屏幕（手机） 768px以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px以上

2021-11-19_235112.jpg

1.2响应式容器尺寸的划分

  1. @media screen and (max-width: 768px){
  2.  .container{
  3.          width: 100%;
  4.  }
  5. }
  6. @media screen and (min-width: 768px) and (max-width: 992px){
  7.  .container{
  8.          width: 750px;
  9.  }
  10. }
  11. @media screen and (min-width: 992px) and (max-width: 1200px){
  12.  .container{
  13.          width: 970px;
  14.  }
  15. }
  16. @media screen and (min-width: 1200px){
  17.  .container{
  18.          width: 1170px;
  19.  }
  20. }

2.什么是媒体查询

  • 一个网页,需要在不同设备上都能正常显示,可以利用媒体查询的方式,检测不同设备,设置不同的CSS代码实现。

    2.1媒体类型

  • all (所有的设备)

  • print (打印设备)

  • screen(电脑屏幕,平板电脑),智能手机

    2.2语法

    /*320px - 无限大*/
@media only screen and (min-width:320px ) {
.box {
  width: 100px;
  height: 100px;
}
}
/*0 - 640px*/
@media only screen and (max-width:640px ) {
.box {
  width: 200px;
  height: 200px;
}
}
/*400px - 600px 之间*/
@media only screen and (min-width: 400px) and (max-width: 600px) {
.box {
  width: 300px;
  height: 300px;
}
}
/*竖屏*/
@media screen and (orientation:portrait) {}
/*横屏*/
@media screen and (orientation:landscape) {}

    2.3媒体查询引入不同css文件

  • 案例：屏幕大于640px时，一行显示两个div。小于640px时，一行显示一个div

    <link rel="stylesheet" href="01.css" media="screen and (min-width:320px)">
<link rel="stylesheet" href="01.css" media="screen and (min-width:640px)">

    宽屏.png

3.媒体查询改变html字体大小思路

  • 按照一定的比例设置更多设备的HTML字体大小
    • 1.假设设计稿是750px
    • 2.假设这个时候html字体大小为100px
    • 3.那么在320px设备的时候 字体大小为 100/750*320
    • 4.只要根据这个比例在不同设备设置rem基准值(html字体大小)即可
      @media (min-width: 320px) {
html {
font-size: 42.66666667px;
}
}
@media (min-width: 360px) {
html {
font-size: 48px;
}
}
@media (min-width: 375px) {
html {
font-size: 50px;
}
}
@media (min-width: 384px) {
html {
font-size: 51.2px;
}
}
@media (min-width: 400px) {
html {
font-size: 53.33333333px;
}
}
@media (min-width: 411px) {
html {
font-size: 54.8px;
}
}
@media (min-width: 414px) {
html {
font-size: 55.2px;
}
}
@media (min-width: 468px) {
html {
font-size: 62.4px;
}
}
@media (min-width: 480px) {
html {
font-size: 64px;
}
}
@media (min-width: 540px) {
html {
font-size: 72px;
}
}
@media (min-width: 600px) {
html {
font-size: 80px;
}
}
@media (min-width: 640px) {
html {
font-size: 85.33333333px;
}
}
@media (min-width: 720px) {
html {
font-size: 96px;
}
}
@media (min-width: 750px) {
html {
font-size: 100px;
}
}

4.上面的方法与rem适配

  • rem的基准是相对于html元素的字体大小的倍数，em是父元素字体大小的倍数
  • 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 ,user-scalable=no">
  <!-- 把上面的css样式引入进来 -->
    <link />
    <title></title>
  <style>
      body{
          margin: 0;
      }
      .header{
          height: 1rem;
          width: 100%;
          line-height: 1rem;
          text-align: center;
          font-size: 0.48rem;
          color: #fff;
          background: green;
      }
  </style>
</head>
<body>
  <div class="header">购物车</div>
</body>
</html>