响应式布局究竟是什么？

最新推荐文章于 2025-06-07 22:32:24 发布

JayBerg

最新推荐文章于 2025-06-07 22:32:24 发布

阅读量238

点赞数

CC 4.0 BY-SA版权

文章标签：响应式布局前端 viewport

本文链接：https://blog.youkuaiyun.com/weixin_41390717/article/details/84819420

响应式布局的作用

用于在不同的尺寸下显示不同的样式

怎么应用响应式布局

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
//这句话很重要！
<title>Document</title>
</head>
<body></body>
</html>

解释一下

width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=0.5：表示最小的缩放比例
maximum-scale=1.0：表示最大的缩放比例
user-scalable=no：表示用户是否可以调整缩放比例

不同尺寸时加载不同样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link media="(min-width: 500px)" rel="stylesheet" type="text/css" href="css/T_teachers-log.css">
<link media="(max-width: 500px)" rel="stylesheet" type="text/css" href="css/T_teachers-log-smallPhone.css"/>
<title></title>
</head>
<body></body>
</html>

media query（媒体查询）

表示在什么设备或什么宽度下就不加载该样式表

<link media="(min-width: 500px)" rel="stylesheet" type="text/css" href="css/T_teachers-log.css">

只要设备的宽度小于500像素时，这个T_teachers-log.css就不会被加载；

<link media="(max-width: 500px)" rel="stylesheet" type="text/css" href="css/T_teachers-log-smallPhone.css"/>

只要设备的宽度大于500像素时，这个T_teachers-log-smallPhone.css就不会被加载；

总结

这样就可以在不同宽度下加载不同的样式表了！