第10章自适应布局_csdn典型自适应高度后台管理布局-CSDN博客

本文链接：https://blog.csdn.net/richieandndsc/article/details/137032185

本文介绍了自适应布局的重要性，通过CSS3的媒体查询针对不同设备尺寸应用不同样式，特别是rem和viewport的使用方法。同时提到HTML5和CSS3在自适应设计中的角色，以及Bootstrap和Vue框架在响应式开发中的作用。

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

关于自适应布局，前面我简单介绍过。自适应布局的大概意思就是，当我们的浏览器尺寸改变的时候，我们的网页仍然能够保持相同的布局风格。比如说，我们定义一个按钮，它的尺寸是宽100像素，高50像素。那么，当我们的浏览器尺寸变小的时候，那么这个按钮如果还是100*50像素的话，那么就会显得很大，与整体页面就格格不入。相反，如果浏览器尺寸变大的话，那么这个按钮就会显得小，依然给人不舒服的使用体验。为什么浏览器尺寸会变化呢？一般情况下，这个跟屏幕尺寸有关，电脑屏幕就大于手机屏幕，虽然他们分辨率可能相似。但是，我们仍然不能在手机屏幕上显示电脑屏幕上面一样多的内容。如果解决这些问题，不仅仅是我们开发人员遇到的问题，也是整个行业面临的问题。这不仅仅是web开发领域要解决的，也是其他（类似手游/端游开发）领域也要考虑的事情。

接下来，我们说说CSS3 多媒体查询。它可以针对不同的多媒体类型，可指定使用不同的样式规则。我们先介绍语法：

@media not|only mediatype and (expressions) {

	CSS代码

}

简单的举例如下：

@media screen and (max-width:480px) { 

    body { font-size:12px; }

}

上述代码表示，当你的屏幕分辨率不大于（小于等于）480像素的时候，就使用{}内的样式。当然我们还可以使用“min-width”来指定“大于等于”的情况，也可以两者混合使用。那么，我们应该设置什么样的数值呢？

常用的PC端的分辨率如下：1024px， 1280px，1366px，1440px，1680px，1920px等
常用的移动端的分辨率有：320px、480px、640px、768px、960px、1024px、1200px等
当然，随着显示器技术的不断发展，分辨率肯定是越来愈高的。

一般情况下，我们会根据不同尺寸的分辨率范围来定义不同的样式。这样做的原因在于，我们希望我们的网页在不同的分辨率下都能达到不错的效果。例如，屏幕小了，内容（文字和图片）也跟随变小一些，屏幕大了，内容（文字和图片）也随之变大一些。但是，我们不可能为每一种分辨率都指定对应的CSS代码，因此我们只是规定几个区间范围即可。
我们新创建一个“10_auto.html”的文档。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>

<style type="text/css">

/* 1200px以上 */
@media screen and (min-width:1201px) {
	.box { font-size:20px; }
}
    
/* 1200px */
@media screen and (min-width:1025px) and (max-width:1200px) {
	.box { font-size:18px; }
}
    
/* 960px和1024px */
@media screen and (min-width:769px) and (max-width:1024px) {
	.box { font-size:16px; }
}
    
/* 640px和768px */
@media screen and (min-width:481px) and (max-width:768px) {
	.box { font-size:14px; }
}
    
/* 320px和480px以及更小 */
@media screen and (max-width:480px) {
	.box { font-size:12px; }
}

</style>

<div class="box">测试文字大小</div>

</body>
</html>

我们根据浏览器分辨率大小来指定了不同的字体大小。
接下来我们还需要在<head>中间增加如下代码：

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

这句话的意思就是说让我们移动端的网页宽度就等于设备的宽度（分辨率）。
如何在PC端来测试移动端网页呢？很简单，还是打开chrome浏览器的开发者模式，

点击上面的红线标记的按钮，进入移动端模式

上面红线框选的就是模拟浏览器的尺寸，这个数值我们是可以手动修改的。当我们修改之后，就可以同步在右侧的开发者窗口中看到对应字体的数值大小。

这个对于我们模拟手机浏览器还是帮助很大的。我们把宽度依次修改为：320px、480px、640px、768px、960px、1024px、1200px，1440px查看文字的样式大小，就会发现@media会按照不同的宽度来执行不同的CSS代码。关于媒体查询我们就介绍到这里。

接下来我们说一下“布局单位”的问题。我们之前写网页布局的时候，都是按照“px”像素为单位，但是当我们不明确目标客户浏览器分辨率尺寸的时候，我们使用固定像素的话，就会出现一些问题。当然，我们可以换成“百分比”来替换“像素”单位，但是这样我们需要做大量的计算，对于开发人员来讲，这不是一个很好的解决办法。这个时候HTML5就提供了一个 “rem” 的CSS3新单位。rem是相对于根标签<html>而言，简单的说它就是一个相对单位。假设我们把html标签的font-size属性设为10px，那么此时1rem就为10px。如果我们要设置100px的div，我们只需将它的宽设为10rem即可。因此，我们的关键点就是设置<html>根标签的font-size属性值。我们可以使用媒体查询将不同分辨率下的html标签设置为不同的数值（大分辨率就设置大一些）。默认情况下，<html>的font-size值应该是16像素。我们新建一个“10_rem.html”的HTML5文档。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>

<style type="text/css">
html { font-size:10px; }
.box { width:10rem; height:10rem; background-color:red; }
</style>

<div class="box"></div>

</body>
</html>

我们通过CSS设置html标签的font-size值为10像素，也就是1rem=10像素。然后定义一个div标签的尺寸是10rem，换算下来就是100像素。我们浏览器查看效果

我们在开发者模式下查看，这个div的尺寸就是100*100像素。我们既然知道“rem”的使用方式了，就能明白自适应网页的关键点就是根据不同设备的分辨率来设置<html>根标签的font-size属性值，如何设置呢？我们前面讲的媒体查询就可以。当然也可以额通过JavaScript脚本计算出来的，所以当分辨率发生变化时，html的font-size就会变，不过这得在你调整分辨率后，刷新页面才能看得到效果。它是根据什么计算的，这就跟设计稿有关了，一般情况下，设计稿应该是基于宽度750像素（也有使用宽度1080像素）来设计的。为了计算方便，取一个100px的font-size为参照，也就是说1rem=100px。那么html的font-size=deviceWidth / 7.5。这个deviceWidth就是viewport设置中的那个deviceWidth，也就是移动设备的像素宽度。剩下的就是我们根据设计稿中的像素值，转写成rem单位即可。也就是说，我们在设置尺寸，或者位置的时候，就不在使用像素绝对单位，而使用rem相对单位了。我们的代码是不变的，但是当屏幕尺寸变大变小的时候，1rem对应的像素值也会变化，我们使用rem定义的标签也会一起放大或缩小。这就达到自适应的目的了。

还有一个“em”单位，它是相对于当前标签的font-size属性值而言的，也就是说，1em表示当前元素的字号大小。如果当前标签没有指定font-size像素值话，就继续向上需找父标签的font-size像素值，直到body标签的font-size属性值（16像素）。假如，我们制定某个<div>标签的font-size是10像素的话，那么1em就等于10像素，10em就是等于100像素。个人感觉，这个“em”单位比较难用，因为我们需要明确当前标签的font-size像素值。因为我们经常不会给每一个标签指定font-size像素值，因此需要去寻找他的上级标签。

在自适应网页设计中，还需要注意两个问题，一个是图片问题，一般情况下，都会让图片自动缩放：img { width: 100%; } 。也即是说，我们给每个图片定义一个父标签<div>，并使用rem来定义这个父标签的尺寸。另一个问题就是字体，由于字体不能无限的放大和缩小，这样对用户不是很友好，因此我们通常通过媒体查询去统一设置几套字体大小样式，也就是说字体大小还是使用px单位。当然，我们也可以使用rem来定义字体大小。

最后在啰嗦一句，HTML5和CSS3是前端主流趋势，可以建议大家学习两个框架，一个是bootstrap，一个是vue。bootstrap是一个纯前端框架，学习比较简单，而vue则是一个MVVC框架，主要用于构建前端工程。两者往往相互配合，可以帮助我们完成“自适应”布局下的网页开发。我们会在后期的课程中重点介绍vue的使用。

本课程的内容可以通过CSDN免费下载：https://download.csdn.net/download/richieandndsc/88962032