一、面临问题：网页在电脑上完全显示，但在手机上显示不完全（需要左右拉动才看得到其他部分）

例如：下面这个简易的网页，为加入自动适应之前，电脑和手机打开都是下图效果，电脑上显示看上去效果不错，但手机上需要左右拉动才可以看到网页其他部分，那如何解决这个问题呢？

 二、解决问题

1.目标：在手机上也得完全显示就行

2.实际操作部分（重点）：

 ①将网页调整权交给网页

      – 标签中加入一行viewport（网页默认的宽度和高度）元标签

                           width=device-width：网页宽度默认等于屏幕宽度

                           initial-scale=1；1代表网页初始大小占屏幕面积的100%

      – 注意：老式浏览器（例如：IE6、7、8），需要使用css3-mediaqueries.js，如下

②禁止使用绝对宽度

        不可：以下这种代码不可使用

width：10px；
        可行：以下两种代码均可

width: 20%;
width:auto;
③静止对字体使用固定大小

        不可：以下这种代码不可使用

font-size: 12px
        可行：以下代码均可行

font-size:1.2em
补充：浏览器的默认字体高都是16px，所以未经调整的浏览器在显示1em=16px。于是我们就可以通过这个等量关系进行计算了！若已经写好的网页字体的px直接除以16就是em了。

body {
font: normal 100% Helvetica， Arial， sans-serif;
}
④得是流动布局

           – 就是使用float

father .panel_text{

background-color: #F5F5F2;
float: left;
margin-left: -88%;
margin-top: 15%;
width:295%;  
height:200%; 

}
⑤选择css，就像if判断

利用css3中的Media Query模块

提示：下面if、if else只是方便解释写的，直接将代码框的代码放在标签里

if（如果屏幕宽度小于400像素）{

}else if（如果400像素<屏幕宽度<600像素）{

}

⑦还有图片啦！

           写这个简易页面时就踩了一个坑，图片没有设置。。。

css代码用下%号结束就行！

father .panel_text img{

width:100%;  
height:100%;

}

第⑤步（补充类，另外一种方法）css3中@media的使用（根据屏幕，在一个css文件中判断使用哪段css代码）

      先看看定义：

              – 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

              – @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

以下代码意思：如果文档宽度小于 300 像素则修改背景颜色(background-color):

@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
最后来个总结吧：印象最深的就是自适应的思维和物理学很近有木有！由于物体可以选取其他不同的东西做参考，所以物理书：“运动是绝对的，静止是相对的”那迁移到这个代码上也是一样啦！网页对应不同的屏幕标准得自动适应，那代码就得采用相对的，而不是绝对的！
————————————————
版权声明：本文为CSDN博主「leo逻辑」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_17107171/article/details/81876125