响应式布局基本实现Media Query（媒介查询）

最新推荐文章于 2024-06-19 23:47:23 发布

转载最新推荐文章于 2024-06-19 23:47:23 发布 · 715 阅读

本文介绍如何使用CSS中的MediaQuery实现响应式布局，并详细解释了不同设备类型及特性的应用方法。同时，介绍了Bootstrap栅格系统及其在不同屏幕尺寸下的应用技巧。

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

1.Media Query的使用方法

首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

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

参数解释：

width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）

使用：

@media 设备类型 and （设备特性）{样式代码}

2.Ｍedia Query的设备类型（10种）

all：所有设备
screen：电脑显示器
print：打印用纸或打印预览视图
handled：便携设备
tv：电视机类型的设备
…

3.CSS中的Media Query的设备特性（13种）

设备宽高：device-width,device-height
渲染窗口的宽和高：width,height
设备的手持方向：orientation
设备的分辨率：resolution
…

4.使用方法：（外联和内嵌样式）

//外联

@import url(style.css) screen and (min-width:1000px);

<link rel="stylesheet" href="style.css" media="only screen and (max-width:640px)">

//内嵌样式：
<style>
    @media screen and (min-width:640px) {
      body{
        background:coral;
      }
    }
  </style>

注意:only关键字的作用是，让那些不支持Media Query但是能够读取Media Type的设备的浏览器将表达式中的样式隐藏起来。

@media only screen and (color){样式代码}

对于支持Media Query的设备来说，正确应用该样式；对于不支持Media Query但能够读取Media Type的设备，由于先读取到的是only 而不是screen，将忽略该样式。

5.在iPhone中的显示

现在的网页大多是按照宽度为800px左右的标准进行制作的，故Safari浏览器按照980px的宽度来显示，就可以正常显示绝大多数的网页了。

所以iPhone中的Safari浏览器也不会应用小尺寸窗口运行时的样式，也是选择窗口宽度为980px时所应用的样式。因此，可以加入meta标签来指定窗口宽度来显示。

<meta name='viewport' content='width=600px' />
  1

6.bootstrap栅格系统的应用：

bootstrap栅格系统： http://v3.bootcss.com/css/#grid

bootstrap中媒体查询中创建关键了3个分界点阈值：

超小屏幕手机 (<768px)
小屏幕平板 (≥768px)
中等屏幕桌面显示器 (≥992px)
大屏幕大桌面显示器 (≥1200px)