媒体查询响应式布局 弹性布局和响应式布局
本篇文章给大家谈谈媒体查询响应式布局，以及弹性布局和响应式布局对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
自媒体查询、flex弹性布局、响应式布局及 rem 布局
自媒体查询、rem布局、响应式布局技术，是三个不同的技术。自媒体查询常用在适配不同的设备显示场景下，根据屏幕大小显示不同页面，但功能大致不变的这么一个技术。 rem布局它是一个长度单位，这个长度单位是根据‘根元素’的字体大小的单位确定的（根元素字体大小= 1rem）。响应式布局它是在页面宽度改变时，整个页面或者页面中的局部随着页面的缩放进行响应并实时变化（响应式布局和自媒体查询有区别）。在如今复杂的开发中这几个技术越来越密不可分，在项目中可以通过实际需求进行搭配。
功能：自媒体查询主要是设置不同的设备屏幕下的显示样式。
获取浏览器或设备宽度：
min-device-width（设备的宽度）\ min-width(浏览器的宽度)（注释：也可以获取高度，就是将width改写成height）
方法：
功能：就是使用flex对页面进行布局，也可以是响应式的。
方法：一下方法为flex常用方法，具体学习可以点击链接 flex布局
概念：指相对跟元素的字体大小的单位。（补充：rem于em的区别一个是以根元素字体大小为参考，em是以父级元素为参考）
使用方法：
一般使用媒体查询+rem或js,在不同宽度的窗口下自动调节字体大小。
布局特点：不同设备对应不同的HTML或者局部自适应。（不同的设备不同的页面）
布局特点：确保一个页面在所有终端上，都能显示出令人满意的效果。（一套方案，处处运行。）
设计思路：使用自媒体查询及用%或 rem作为单位，对不同视口设备进行编写样式。
布局特点：为了保证在各种屏幕上得不失真，就要根据实际屏幕宽度做等比换算。（一套方案，是不同尺寸、分辨率的视口呈现出较好的效果。）
设计思路：使用自媒体查询及用%或 rem作为单位，对不同视口设备进行编写样式。
在项目开发中，根据项目的实际情况选择不同的技术的搭配，这样才能实现业务的效果。
使用CSS 媒体查询实现响应式布局:根据屏幕尺寸动态修改样式
使用 CSS媒体查询实现响应式布局的核心是通过@media规则根据屏幕尺寸动态调整样式，关键步骤包括定义断点、编写条件样式，并结合相对单位优化适配性。
一、媒体查询基础语法媒体查询通过@media规则实现，其基本结构如下：
@media [media-type] and(media-feature){/*满足条件时应用的CSS规则*/}media-type：可选参数，指定媒体类型（如 screen、print），省略时默认为 all。media-feature：媒体特性（如 width、height、orientation），通过逻辑运算符（and、,）组合多个条件。CSS规则：当条件满足时生效的样式。二、常用媒体特性与断点设计常用媒体特性
width/height：视口宽高（如 max-width: 600px）。
device-width/device-height：设备屏幕物理尺寸（较少使用，因移动端视口适配更关键）。
orientation：屏幕方向（portrait纵向，landscape横向）。
resolution：屏幕分辨率（如 min-resolution: 2dppx适配高分辨率设备）。
断点设计原则
从小到大编写：先定义默认样式（移动端优先），再通过 min-width逐步覆盖大屏幕样式。
参考主流设备尺寸：常见断点如 576px（手机）、768px（平板）、992px（小桌面）、1200px（大桌面）。
三、核心实现步骤添加 viewport meta标签在 HTML的<head>中插入以下代码，确保移动端正确缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0">定义默认样式与媒体查询
默认样式：适用于最小屏幕尺寸（移动端）。
媒体查询覆盖：通过 min-width或 max-width逐步调整样式。
示例1：根据屏幕宽度修改背景色
body{ background-color: yellow;/*默认样式*/}@media screen and(max-width: 600px){ body{ background-color: lightblue;/*屏幕≤600px时生效*/}}示例2：动态调整 Footer布局
#logon-footer>*:first-child{ position: absolute;/*默认样式*/}@media screen and(max-width: 765px){#logon-footer>*:first-child{ position: static;/*屏幕≤765px时取消绝对定位*/}}组合多个条件使用 and或,组合特性，例如同时限制宽度和方向：
@media screen and(min-width: 768px) and(orientation: landscape){.container{ max-width: 90%;/*平板横向时容器宽度调整*/}}四、优化实践建议避免过度使用媒体查询
优先使用相对单位（如%、em、rem）和弹性布局（Flexbox/Grid）实现基础适配。
仅在需要显著样式差异时使用媒体查询（如导航栏折叠、字体大小调整）。
测试与调试
使用浏览器开发者工具模拟不同设备尺寸（Chrome DevTools的 Device Toolbar）。
实际设备测试覆盖主流手机、平板和桌面端。
性能优化
合并相似断点的媒体查询，减少 CSS文件体积。
避免在媒体查询内嵌套复杂选择器，降低渲染性能影响。
五、完整代码示例<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><style> body{ font-family: Arial; margin: 0; padding: 20px; background-color:#f0f0f0;/*默认背景*/}.container{ max-width: 1200px; margin: 0 auto; padding: 20px; background-color: white;}/*平板端样式*/@media screen and(min-width: 768px){.container{ padding: 40px;}}/*桌面端样式*/@media screen and(min-width: 992px){ body{ background-color:#e0e0e0;}.container{ box-shadow: 0 0 10px rgba(0,0,0,0.1);}}</style></head><body><div class="container"><h1>响应式布局示例</h1><p>调整浏览器宽度查看样式变化。</p></div></body></html>总结：媒体查询通过@media规则和媒体特性实现条件样式应用，结合移动端优先策略、相对单位及弹性布局，可高效构建适配多设备的响应式网页。实际开发中需合理设计断点、优化性能，并通过测试确保兼容性。
CSS3怎么做出响应式布局
做响应式网站离不开CSS响应式布局查询代码写法，而在此之前，我们需要了解什么是媒体查询以及如何才CSS中引入媒体查询。
什么是媒体查询？
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height和color（等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
如何在CSS中引入媒体查询？
媒体查询写在CSS样式代码的最后，CSS是层叠样式表，在同一特殊性下，靠后的的样式会重叠前面的样式。
如何用CSS做响应式布局呢？
1、在HTML头部添加以下代码，用来显示兼容移动设备的显示效果。
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
参数详解：
width=device-width：宽度等于当前设备的宽度
initial-scale=1：初始的缩放比例（默认为1）
minimum-scale=1：允许用户缩放到的最小比例（默认为1）
maximum-scale=1：允许用户缩放到的最大比例（默认为1）
user-scalable=no：用户是否可以手动缩放（默认为no）
2、引入包含Media的CSS文件
一般情况HTMLCSS代码都是分开写的，Media也不例外。
<link rel="stylesheet" type="text/css" rel="external nofollow" href="m320.css" media="only screen and(max-width:320px)"/>
<link rel="stylesheet" type="text/css" rel="external nofollow" href="m480.css" media="only screen and(min-width:321px) and(max-width:375px)"/>
3、写Media中的代码
以某个网页的响应式布局为例
结构:@media设备类型and(设备特性)｛样式代码｝
/*媒体查询*/
/*当页面大于1200px时，大屏幕，主要是PC端*/
@media(min-width: 1200px){
}
/*在992和1199像素之间的屏幕里，中等屏幕，分辨率低的PC*/
@media(min-width: 992px) and(max-width: 1199px){
#adver.center{
width: 50%;
margin:-10px 0 0-25%;
}
main.center h2{
font-size: 40px;
}
}
/*768和991像素之间的屏幕里，小屏幕，主要是PAD*/
@media(min-width: 768px) and(max-width: 991px){
#adver.center{
width: 60%;
margin:-10px 0 0-30%;
}
#adver.search,#adver.button{
font-size: 20px;
}
main.center h2{
font-size: 35px;
}
}
/*在480和767像素之间的屏幕里，超小屏幕，主要是手机*/
@media(min-width: 480px) and(max-width: 767px){
header, header.center, header.link{
height: 45px;
}
header.logo,.sm-hidden,.sidebar,.md-hidden{
display: none;
}
header.link{
width: 100%;
line-height: 45px;
}
#adver{
padding: 45px 0 0 0;
}
#adver.center{
width: 70%;
height: 53px;
margin:-10px 0 0-35%;
}
#adver.search,#adver.button{
height: 45px;
font-size: 18px;
}
.sm-visible{
display: block;
}
main.center h2{
font-size: 30px;
}
main.center p{
font-size: 15px;
}
main figure{
width: 49.2%;
}
}
/*在小于480像素的屏幕，微小屏幕，更低分辨率的手机*/
@media(max-width: 479px){
header, header.center, header.link{
height: 45px;
}
header.logo,.xs-hidden,.sm-hidden,.sidebar,.md-hidden{
display: none;
}
header.link{
width: 100%;
line-height: 45px;
}
header.link li{
width: 25%;
}
#adver{
padding: 45px 0 0 0;
}
#adver.center{
width: 80%;
height: 48px;
margin:-10px 0 0-40%;
}
#adver.search,#adver.button{
height: 40px;
font-size: 16px;
}
.sm-visible{
display: block;
}
footer.bottom, footer.version{
font-size: 13px;
}
main.center h2{
font-size: 26px;
}
main.center p{
font-size: 14px;
}
main figure{
width: 99%;
}
}
响应式布局的原理就是在不同的窗口大小下显示不同的结构和样式。只要掌握好CSS的样式，响应式布局就没问题。
媒体查询响应式布局和弹性布局和响应式布局的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！