搞定响应式布局_响应式官网头部-CSDN博客

本文链接：https://blog.csdn.net/weixin_45688725/article/details/103808650

最近有的小伙伴面试会被问到响应式布局媒体查询的相关知识，这篇博文我就来给大家总结一下响应式布局的相关知识。
响应式布局是什么呢？
响应式布局时2010年5月份提出来的一个概念。是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构、行为、表现的设计方式。例如我们用电脑、手机、平板等设备访问同一个网页展示出来的效果却是不一样的。
这里我们就拿匹克的官网来看吧，我们打开匹克的官网是这样子的：
在这里插入图片描述
当我把窗口调小时：

我们可以看出logo右侧的导航栏间距变小了，嗯莫慌，我们再让它变小一点：

这张是我把窗口调到最小的时候展现出来的页面。
这个就是一个简单的响应式布局，响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明viewport ：

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

width= device -width 视口宽度等于可视窗口宽度；
user scalable=no 不允许用户缩放；
initial-scale=1 初始化比例为1；
maximum-scale=1 最大缩放比例为1；
优缺点
➢优点:面对不同的分辨率设备灵活性强
能够快捷解决多设备显示适应问题

➢缺点:兼容各种设备工作量大
代码累整，会显示隐藏无用的元素，加载时间加长
怎样来编写响应式布局页面？
上文已经介绍过响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，所以我们直接来写吧。
媒体查询分为2种，外联式媒体查询和内嵌式媒体查询
语法：<link rel="stylesheet" media="screen and (min-width:960px)" href="red.css">
外联式媒体查询

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>外联式媒体查询</title>
    <link rel="stylesheet" media="screen" and (min-width:960px) href="blue.css">
    <link rel="stylesheet" media="screen" and (max-width:960px) href="red.css">
</head>

当屏幕窗口宽度大于等于960px时，引入red.css文件
内嵌式媒体查询

<title>外联式媒体查询</title>
    <style>
        body{
            background-color: yellow;
        }
        @media screen and (max-width:960px){
            body{
                background-color: blue;
            }
        }
    </style>