响应式布局

最新推荐文章于 2024-07-25 16:45:46 发布

「已注销」

最新推荐文章于 2024-07-25 16:45:46 发布

阅读量136

点赞数

文章标签： css html5 html

本文链接：https://blog.csdn.net/m0_58047238/article/details/119982407

版权

媒体查询 Flex布局响应式设计 REM单位样式切换

关键词由CSDN通过智能技术生成

一、媒体查询（`MediaQuery`）

1.定义

为不同尺寸的屏幕设定不同的css样式。

<body>
  <div id="div0">111</div>
</body>

<style>
    #div0{
      width: 100px;
      height: 200px;
    }
  /*  max-device-width 代表设备的最大宽度  有 device*/
    @media screen and (max-device-width:199px) {
      #div0{
      background-color: rgb(233, 147, 54);
      }
    }

    @media screen and (min-device-width:200px) and (max-device-width:300px) {
      #div0{
      background-color: blue;
      }
    }

    @media screen and (min-device-width:301px) {
      #div0{
      background-color: rgb(191, 26, 174);
      }
    }
  /* min-width用来设置浏览器的最小宽度  无 device*/
   @media screen and (min-width:500px) and (max-width:700px){
      div{
        background-color: aqua;
      }
    }
  </style>

2. @media常用参数

属性名称	作用
width、height	浏览器可视宽度、高度
device-width	设备屏幕的宽度
device-height	设备屏幕的高度

3. 引入方式

3.1 style内联样式

<style>
    .div0 {
      width: 100%;
      height: 500px;
    }

    .div0>div {
      float: left;
    }

    /* 一行三个div */
    @media screen and (min-width:800px) {

      .div0>div {
        width: 33.3%;
        height: 200px;
      }

      .div1 {
        background-color: aqua;
      }

      .div2 {
        background-color: rgb(90, 204, 8);
      }

      .div3 {
        background-color: rgb(191, 13, 214);
      }
    }

    /* 两行三个div */
    @media screen and (min-width:701px) and (max-width:799px) {
      .div0>div {
        width: 50%;
        height: 200px;
      }

      .div1 {
        background-color: aqua;
      }

      .div2 {
        background-color: rgb(90, 204, 8);
      }

      .div3 {
        background-color: rgb(191, 13, 214);
      }
    }

    /* 三行三个div */
    @media screen and (max-width:700px) {
      .div0>div {
        width: 100%;
        height: 200px;
      }

      .div1 {
        background-color: aqua;
      }

      .div2 {
        background-color: rgb(90, 204, 8);
      }

      .div3 {
        background-color: rgb(191, 13, 214);
      }
    }
  </style>

<div class="div0">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
  </div>

3.2 style内部样式

 <style>
    /* 公共样式 */
    .div0 {
      width: 100%;
      height: 500px;
    }

    .div0>div {
      float: left;
      height: 400px;

    }

    .div1 {
      background-color: aqua;
    }

    .div2 {
      background-color: rgb(90, 204, 8);
    }

    .div3 {
      background-color: rgb(191, 13, 214);
    }
  </style>

  <style media="(min-width:800px)">
    /* 一行显示三个div */
    .div0>div {
      width: 33.3%;
    }
  </style>
  <style media="(min-width:701px) and (max-width:799px)">
    /* 两行显示三个div */
    .div0>div {
      width: 50%;
    }
  </style>
  <style media="(max-width:700px)">
    /* 三行显示三个div */
    .div0>div {
      width: 100%;
    }
  </style>

3.3 外部样式link引入，写在link标签中，有条件的引入外部样式表

 <link rel="stylesheet" href="./1.css">
  <link rel="stylesheet" href="./2.css" media="(min-width:800px)">
  <link rel="stylesheet" href="./3.css" media="(min-width:701px) and (max-width:799px)">
  <link rel="stylesheet" href="./4.css" media="(max-width:700px)

二、flex（`FlexiableBox`）

1.定义

即弹性盒子，用来进行弹性布局，可以配合rem处理尺寸的适配问题。

2.常用属性（设置在父元素上）

属性名	作用	取值
`flex-direction`	子元素在父元素盒子中的`排列方式`	`row`（默认，从左到右）、row-reverse、column、column-reverse
`flex-wrap`	子元素在父元素盒子中的`是否换行`	wrap、`no-wrap`（默认，在空间不够时会压缩）
`flex-flow`	上面两个属性的简写	第一个位置写排列方式空格第二个位置写换行方式
`justify-content`	存在剩余空间时，设置为间距的方式	`flex-start`（默认）、flex-end、center、space-between（两边不留空）、space-around（两边留空）
`align-items`	设置（`单行`）每个flex元素在交叉轴上的默认对齐方式	如果x轴是交叉轴，则对齐方式可以设置为左、中、右；如果y轴是交叉轴，则对齐方式可以设置为上、中、下。flex-start、flex-end、center
`align-content`	设置（`多行`）每个flex元素在交叉轴上的默认对齐方式	flex-start(位于容器的开头)、flex-end（位于容器的结尾）、center、space-between、space-around

2.其它属性（设置在子元素上）

属性名称	作用	取值
flex-basis	设置弹性盒伸缩基准值	相当于宽度，设置后，原width将失效：%（父元素的百分比），`px`
flex-grow	设置弹性盒的扩展比率	当有多余空间时，如何分配剩余空间，取值代表占剩余空间的份数
flex-shrink	设置弹性盒子的缩小比率	取值为0时代表不允许缩小，值越大，缩小越多
flex	以上三个属性的简写	grow–shrink–basis

3.给子元素设置伸缩的特殊写法

属性名称	作用	取值
`flex:auto;`	允许自动扩大和缩小，第三值无所谓	flex: 1 1 auto;
`flex:none;`	不可以自动扩大和缩小，以第三个值为准，原width值失效，也可以设置一个具体的宽度。	flex: 0 0 auto;
`flex: 0%; flex:100px;`	允许自动扩大和缩小，第三值无所谓	flex: 1 1 0%; flex: 1 1 100px;
`flex: 1`	允许自动扩大和缩小，第三值无所谓	flex: 1 1 0%

4.案例1–输入框–左右两个各一个label标签

<body>
  <div class="div0">
    <label for="">姓名</label>
    <input type="text" name="" id="">
    <label for="">go</label>
  </div>
</body>

<head>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .div0{
      width: 250px;
      display: flex;
      border: 1px solid #dcdcdc;
      margin: 200px;
    }
    .div0 label{
      flex: 1;
      background-color: #f5f5f5;
      font-family: "楷体";
      text-align: center;
      font-size: 1.2rem;
      line-height: 50px;
    }
    .div0 input{
      border: none;
      outline: none;
      height: 50px;
    }
    .div0 label:nth-child(3){
      /* 因为上方已经设置了flex为1，所以此时设置width不生效 */
      /* 设置go两边的空白空间 ，即设置go的宽度*/
      flex: 0 0 35px;
    }
  </style>
</head>

5.案例1–输入框–各个输入框左部分的文字标签右对齐

 <form action="" >
    <div id="form">
      <div>
        <label for="" >姓名：</label>
        <input type="text">
      </div>
      <div>
        <label for="">请输入密码：</label>
        <input type="text">
      </div>
    </div>
  </form>

  <style>
    #form div{
      display: flex;
      margin-top: 10px;
      /* 弹性盒子里的子元素，如果不做大小的限制，大小会随之改变的 */
      align-items: flex-start;
    }
    #form div label{
      flex: 0 0 100px;
      text-align: right;
    }
  </style>

三、rem的使用

rem：相对于根元素的字体大小的单位。

em：相对于父一级元素的字体大小的单位。

 /* 设置根元素rem的尺寸 */
    html{
      font-size: 10px;
    }
    div{
      font-size: 2rem;
    }

案例三：使用媒体查询+rem或js的方式，在不同的的视口下自动调整字体大小

<script>
    var c = ()=>{
       // 获取设备的宽度
       var deviceWidth = document.documentElement.clientWidth;
       // 设置字体大小的计算标准
       var size = (20 * (deviceWidth / 320)) > 40 ? 40 + "px" : (20 * (deviceWidth / 320) +"px")
       document.documentElement.style.fontSize=size;
    }
    
    // 监听到load事件和resize事件时，都执行函数c
    window.addEventListener("load",c);
    window.addEventListener("resize",c);
  </script>

案例四：自适应布局

不同的设备用不同的html页面或者局部伸缩

通过js跳转不同的html页面

  <script type="text/javascript">
      var redirect=()=>{
        // 获取设备的信息
        let userAgent=navigator.userAgent.toLowerCase();
        // 判断设备类型
        let deviceReg = /ipad|iphone|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/;
        if(deviceReg.test(userAgent)){
          // 跳转到移到端页面
          window.location.href="move.html"
        }else{
          window.location.href="pc.html"
        }
      }
      redirect();
  </script>

三栏响应式布局：局部自适应+媒体查询

<div class="div0">
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="d3">3</div>
  </div>

<style>
    .div0{
      display: flex;
    }
    /* 两边两栏在页面缩放时固定不变，只有中间那一栏改变大小 */
    .d1{
      background-color: yellow;
      flex: 0 0 50px;
    }
    .d2{
      background-color: rgb(27, 27, 172);
      flex: 1;
    }
    .d3{
      background-color: yellowgreen;
      flex: 0 0 50px;
    }
	
	 @media screen and (min-device-width:500px) and (max-device-width:700px){
      .d2{
      background-color: rgb(214, 24, 195);
      flex: 1;
      }
    }
  </style>

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式布局

一、媒体查询（MediaQuery）1.定义为不同尺寸的屏幕设定不同的css样式。<body> <div id="div0">111</div></body><style> #div0{ width: 100px; height: 200px; } /* max-device-width 代表设备的最大宽度有 device*/ @media screen and (max-
复制链接

扫一扫