响应式布局（viewport、百分比布局、媒体查询、em/rem、vw/vh）

最新推荐文章于 2025-05-26 17:23:59 发布

辰辰辰辰宸

最新推荐文章于 2025-05-26 17:23:59 发布

阅读量647

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 html 媒体

本文链接：https://blog.csdn.net/weixin_43765641/article/details/127154694

本文详细介绍了响应式布局的关键技术，包括设置viewport以适应不同设备屏幕，使用百分比布局实现自适应，利用媒体查询针对不同屏幕尺寸定制样式，以及理解em、rem、vw和vh单位在响应式设计中的应用。

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

目录

一、viewport

1、设置宽度为屏幕宽度

2、最大缩放比例为1.0

3、最小缩放比例为1.0

4、禁止用户捏合操作

5、初始化的缩放比例

二、百分比布局

三、媒体查询

1、大于某个值时的样式

2、小于某个值时的样式

3、在最大值和最小值内的样式

4、除某个范围内的样式

四、em和rem

五、vw和vh

一、viewport

作用：初始化页面元素，防止页面被缩放，规范用户操作

1、设置宽度为屏幕宽度
width=device-width
2、最大缩放比例为1.0
maximum-scale=1.0
3、最小缩放比例为1.0
minimum-scale=1.0
4、禁止用户捏合操作
user-scalable=no
5、初始化的缩放比例
initial-scale=1.0
二、百分比布局

宽高百分比相对于父元素的宽高

margin和padding的百分比相对于父元素的宽度

定位的百分比相对于它的参照物

三、媒体查询

作用：在不同的屏幕大小下定制样式

1、大于某个值时的样式
@media screen and (min-width：宽度){样式}
2、小于某个值时的样式
@media screen and (max-width：宽度){样式}
3、在最大值和最小值内的样式
@media screen and (min-width：宽度)  and  (max-width：宽度){样式}
4、除某个范围内的样式
@media not screen and (min-width：宽度)  and  (max-width：宽度){样式}
四、em和rem

em：相对于最近的父元素的font-size的大小

rem：相对于html的字体大小

五、vw和vh

相对于可视窗口的大小