web前端的日常更新8.2

最新推荐文章于 2024-11-02 15:48:17 发布

W晚睡W

最新推荐文章于 2024-11-02 15:48:17 发布

阅读量66

点赞数 1

文章标签：前端 servlet

本文链接：https://blog.csdn.net/m0_72174711/article/details/126129979

版权

今天我们没有上太多的内容，所以我也就简简单单的和大家介绍一下响应式开发的一些内容。

1.几何概念

 <head>
    <meta charset="UTF-8" />
    <!-- 主要是告诉浏览器，以ie浏览器最高的版本解析页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 设置理想视口 -->
    <meta
      name="viewport"
      content="
  width=device-width, 
  initial-scale=1.0,
  user-scalable=no,
  maxinum-scale=1.0,
  mininum-scale=1.0

  "
    />
    <title>Document</title>
  </head>
  <body></body>

2.移动端开发

 <title>Document</title>
    <!-- <style>
        body{
            background-color: #ccc;
        }
        @media screen and (min-width:700px) and (max-width:900px) {
            body{
                background-color: #f60;
            }
        }
       @media screen and (max-width:699px){
           body{
               background-color: #0f0;
           }
       } 
       @media (max-width:499px) {
           body{
               background-color: blue;
           }
           
       }
    </style> -->
    <link rel="stylesheet" href="./700-900.css" media="screen and (max-width:900px) and (min-width:700px)" />
    <link rel="stylesheet" href="./600.css" media="screen and (max-width:600px)" />
  </head>
  <body></body>
</html>

3.移动端页面

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 设置视口大小  
        device-width表示设备的宽度（完美视口）
        initial-scale 表示页面的初始缩放值
        user-scalable 是否允许用户缩放
        maxinum-scale=1.0
        mininum-scale=1.0
     -->
    <meta
      name="viewport"
      content="width=device-width, 
    initial-scale=1.0,
    user-scalable=no,
    maxinum-scale=1.0,
    mininum-scale=1.0
    "
    />
    <title>Document</title>
    <style>
      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
  </body>
</html>

4.媒体查询

 <style>
      body {
        background-color: #ccc;
      }
      /* 第一种方式  直接引入 内部样式表 */
      /* 在992px-768px之间设置的样式 */
      @media screen and (max-width: 992px) and (min-width: 768px) {
        body {
          background-color: orange;
        }
      }
      /* 可以简写，默认写了screen and */
      @media (max-width: 768px) {
        body {
          background-color: yellowgreen;
        }
      }
    </style>
    <!-- 第二种方式：外接式  外部样式表-->
    <link rel="stylesheet" href="./600.css" media="screen and (max-width: 600px) " />
 
  </head>
  <body>
  </body>
</html>

5.媒体查询移动端布局

title>Document</title>
    <link rel="stylesheet" href="./05.媒体查询移动端布局.css" />
  </head>
  <body>
    <div id="wrapper">
      <header>
        <h3>页头</h3>
      </header>
      <nav>
        <h3>导航</h3>
      </nav>
      <main>
        <div class="mainLeft">
          <h4>主体</h4>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum a accusamus alias voluptate voluptatum consequuntur, doloremque quis ipsa nostrum dolore, vel, aspernatur debitis. Cum
            dolorem, voluptate optio rerum delectus incidunt!
          </p>
        </div>
        <div class="mainRight">
          <h4>边栏</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, qui.</p>
        </div>
      </main>
      <footer>
        <h3>页脚</h3>
      </footer>
    </div>
  </body>
</html>

6.媒体查询移动端布局css样式

#wrapper {
    text-align: center;
    width: 960px;
    margin: 0 auto;
    margin-top: 50px;
}

header,
nav,
footer {
    height: 100px;
    background-color: #ccc;
    margin-bottom: 20px;
}

main>div {
    float: left;
    margin-bottom: 20px;
    height: 300px;
}

/* 设置主体左侧右侧宽度 */
main>.mainLeft {
    width: 600px;
    margin-right: 20px;
    background-color: aquamarine;
}

main>.mainRight {
    width: 340px;
    background-color: cadetblue;
}

/* 清除浮动影响 */
footer {
    clear: both;
}

/* 监测屏幕放大时变化 */
@media screen and (min-width:1200px) {
    #wrapper {
        width: 1100px
    }

    main>.mainLeft {
        width: 700px;
        margin-right: 30px;
    }

    main>.mainRight {
        width: 370px;
        background-color: cadetblue;
    }
}

/* 流动布局，将写死的宽度变成百分比形式 */
@media all and (max-width:959px) {
    #wrapper {
        width: 100%;
    }

    main>.mainLeft {
        width: 65%;
    }

    main>.mainRight {
        width: 32%;
        float: right;
    }
}

@media all and (max-width:767px) {

    main>.mainLeft,
    main>.mainRight {
        float: none;
        width: 100%;
    }
}