响应式布局概念，bootstrap栅格布局，rem，媒体查询

叫兽~~

已于 2022-06-23 14:30:44 修改

阅读量1k

点赞数 1

文章标签： css html5 前端

于 2022-06-22 19:15:33 首次发布

本文链接：https://blog.csdn.net/m0_55557411/article/details/125395665

版权

1.媒体查询〔 Media Query )是CSS3新语法。

2.引入资源

技术选型

流式布局（百分比布局）
flex 弹性布局（推荐）
rem 适配布局（推荐）
响应式布局

建议：混合技术开发，选取一种主要技术选型，其它技术做辅助，

一、响应式布局容器概念

响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果

原理：在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

常用响应式尺寸划分：

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

二、Bootstrap 栅格布局

<div class="container">
        <div class="row"> <!-- 行 -->
            <div class="col-lg-3 col-md-4 col-sm-6 col-12">1</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-12">2</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-12">3</div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-12">4</div>
            
        </div>
    </div>

1. 嵌套

在列嵌套加一个row 这样可以取消父元素的padding值，高度跟随父级

<div class="container">
    <div class="row">
        <div class="col-md-4">
             <!-- 在列嵌套加一个row 这样可以取消父元素的padding值，高度跟随父级 -->
             <!-- <div class="row"> -->
                    <div class="col-md-6">a</div>
                    <div class="col-md-6">b</div>
             <!-- </div> -->
         </div>
         <div class="col-md-4">2</div>
         <div class="col-md-4">3</div>
    </div>
</div>

2.列偏移

col-md-offset-：通过 * 选择器为当前元素增加了左侧的边距（margin）

<div class="container">
        <div class="row">
            <div class="col-md-3">1</div>
            <div class="col-md-3 col-md-offset-6">2</div>
        </div>
    </div>

3.列排序

通过使用 .col-md-push-*(向右) 和 .col-md-pull-*(向左) 类就可以很容易的改变列（column）的顺序。

<div class="container">
        <div class="row">
            <div class="col-md-4 col-md-push-8">左侧</div>
            <div class="col-md-8 col-md-pull-4">右侧</div>
        </div>
    </div>

4.响应式工具

  <div class="container">
        <div class="row">
            <div class="col-xs-3">1</div>
            <div class="col-xs-3">2</div>
            <div class="col-xs-3 hidden-md">33</div>
            <div class="col-xs-3">4</div>
        </div>
    </div>

三、rem

rem (root em)：是一个相对单位，类似于em,em是相对于父元素字体大小

它的基准是相对于 html 元素的字体udan

优点：就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制

1.less+媒体查询+rem

 /* 设置常见的屏幕尺寸，修改HTML文字大小 */
        html{
            font-size: 50px;
        }
        /* 划分等分 */
        @media screen and (min-width: 320px){
            html{
                font-size: 21.33px;
            }
        }
        @media screen and (min-width: 750px){
            html{
                font-size: 50px;
            }
        }
        div{
            margin-top: 1rem;
            width: 2rem;
            height: 2rem;
            background-color: pink;
        }

四、媒体查询

1.媒体查询〔 Media Query )是CSS3新语法。

使用@media查询，可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

@media mediatype and|not|only (media feature){

css-Code;

}

1、用@media开头注意@符号

2、mediatype 煤体类型：

all：用于所有设备

print：用于打印机和打印预览

screen：用于电脑屏幕，平板，智能手机等

speech：用于屏幕阅读器

3、关健字 and not only：

and：可以将多个媒体特性连接到一起,相当于“且”的意思

not：排除某个媒体类型，相当于“非”的意思，可以省路。

only：指定某个特定的媒体类型，可以省珞。

4、media fature 媒体特性必须有小括号包含：

width：定义输出设备中页面可见区域的宽度

min-width：定义输出设备中页面最小可见区域宽度

max-width：定义输出设备中页面最大可见区域宽度

//在我们屏幕上 并且  最大的宽度是 800像素 设置我们想要的样式
// 【注意：不能省略掉数字后面的单位,and要跟括号分开】
@media screen and (max-width: 800px){
      body{
        background: pink;
      }
}

@media screen and (max-width: 969px ) and (min-width: 540px){
     body{
          background-color: green;
     }
}

2.引入资源

针对于不同的屏幕尺寸，调用不同的css文件

    <!-- 引入资源：针对于不同的屏幕尺寸，调用不同的css文件 -->
    
    <!-- 当屏幕大于或等于320px,引用第一个link的样式 -->
    <link rel="stylesheet" href="某某.css" media="screen and (min-width: 320px)">
    <!-- 当屏幕大于或等于640px,引用第二个link的样式 -->
    <link rel="stylesheet" href="某某2.css" media="screen and (min-width: 640px)">