媒体查询和多列_ie8 column-count-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51847874/article/details/122595514

本文介绍响应式设计的概念及其在不同设备上的应用，并详细阐述了媒体查询的使用方法，包括设置meta标签、利用max-width和min-width进行适配等。此外，还介绍了CSS3中的多列布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要内容
1、媒体查询
2、多列

一、媒体查询
1.1概念
一说到响应式设计，肯定离不开媒体查询media。一般认为媒体查询是CSS3的新增内容，实际上CSS2已经存在了，CSS3新增了媒体属性和使用场景(IE8-浏览器不支持)。
Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
在这里插入图片描述

1.2响应式布局的优缺点
1.2.1优点
（1）面对不同分辨率设备灵活性强
　　（2）能够快捷解决多设备显示适应问题
1.2.2缺点
（1）兼容各种设备工作量大，效率低下
（2）代码累赘，会出现隐藏无用的元素，加载时间加长
1.3响应式设计的步骤
1.3.1设置meta标签
大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签。

> <meta name="viewport" content="width=device-width, initial-scale=1,
> maximum-scale=1, user-scalable=no">

参数解释：
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
1.3.2通过媒介查询来设置Media Queries
Media Queries 是响应式设计的核心。
Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。
具体来说,Media Queries的使用方法如下。

内部引入：
@media 媒体类型and （媒体特性）{你的样式}
外部引入：

<link rel="stylesheet" href="" media="screen  and  (宽度)"/>

媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，
而不是使用小于（<）和大于（>）这样的符号来判断。接下来一起来看看Media Queries在实际项目中常用的方式。

最大宽度max-width
“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。
2.最小宽度min-width
“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

 @media screen and (min-width:900px){
         .wrapper {
              width: 980px;
          }
}

上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。

3.多个媒体特性使用
Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。
当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

1.4实例
PC端

在这里插入图片描述

iPad端

在这里插入图片描述

移动端

在这里插入图片描述

<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
.container{
    width: 85%;
    margin: 0 auto;
}
.container>div{
    height: 300px;
    background-color: red;
    margin-bottom: 15px;
    float: left;
}
@media screen and (min-width: 992px){
    .container>div{
        width: 32%;
        margin-right: 2%;
    }
    .container>div:nth-child(3n){
        margin-right: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px){
    .container>div{
        width: 49%;
    }
    .container>div:nth-child(2n){
        margin-left: 2%;
    }
}
@media screen and (max-width: 767px){
    .container>div{
        width: 100%;
    }
}

二、多列
2.1定义
CSS3 可以将文本内容设计成像报纸一样的多列布局，如下实例:
在这里插入图片描述

2.2属性
2.2.1创建多列
column-count 属性指定了需要分割的列数。
以下实例将

元素中的文本分为 3 列：

div {
column-count: 3;
}

2.2.2列与列之间的间隙
column-gap 属性指定了列与列间的间隙。
以下实例指定了列与列间的间隙为 40 像素：

div {
column-gap: 40px;
}

2.2.1列边框
（1）column-rule-style 属性指定了列与列间的边框样式：

div {
column-rule-style: solid;
}

（2）column-rule-width 属性指定了两列的边框厚度:

div {
column-rule-width: 1px;
}

（3）column-rule-color 属性指定了两列的边框颜色：

div {
column-rule-color: lightblue;
}

（4）column-rule 属性是 column-rule-* 所有属性的简写。
以下实例设置了列直接的边框的厚度，样式及颜色：

div {
column-rule: 1px solid lightblue;
}

三、作业
Pc端

移动端：