带你一步步从PC（电脑）网页自适应到手机端网页（小白入门必看）

男娘i 2024-04-20 09:49 3阅读 0赞

**最近帮老师改个网站，将PC端网页改为手机端网页，虽然对于有一定开发经验的前端开发者是很easy的事情，但是呢，对于小白来说，还是很一头雾水的。下面咱们就从头来进行实战，看看自适应到手机端到底是怎么回事！**

开发必备工具：  
chrome浏览器  
一部手机  
CSS手册（推荐菜鸟教程-[CSS手册][CSS]）

好了，咱们开始吧！

**1、首先我先在电脑上打开网页**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6eDE1OTk1MQ_size_16_color_FFFFFF_t_70]

**2、接下来使用chrome浏览器自带的手机模拟器看看这个网页在手机上显示的效果。**（按F12或者点击浏览器右上角三个小点-》更多工具-》开发者工具）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6eDE1OTk1MQ_size_16_color_FFFFFF_t_70 1]  
点击这个红框，就会显示模拟手机的样子  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6eDE1OTk1MQ_size_16_color_FFFFFF_t_70 2]  
第一个是可以选择手机类型，第二个可以调整手机的宽度和高度，第三个可以选择放大缩小比例。

好了，如果你拿着手机这样看网页，是不是很不舒服，进行操作也十分难受。

**3、自适应第一步，添加meta**

这是个什么意思呢，通俗将就是等比例缩小了，按照你设备的宽度。  
下面是一些具体的参数和意义（刚入门不用记太多）

> width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width  
> 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height：和 width 相对应，指定高度。  
> initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。  
> maximum-scale：允许用户缩放到的最大比例。 minimum-scale：允许用户缩放到的最小比例。  
> user-scalable：用户是否可以手动缩放。

咱们看看加入这段代码（对了，把这段代码加入到head后面），页面出现了什么变化  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6eDE1OTk1MQ_size_16_color_FFFFFF_t_70 3]  
这样看起来是不是比之前看着舒服多了。我在真实的手机上跑一下，看看是什么效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6eDE1OTk1MQ_size_16_color_FFFFFF_t_70 4]  
大家可以看到，右边有一部分缺失，需要向左滑动才行。这是肯定不行的，咱们的最终目标是将这个登录页面显示在手机的中心。

**4、修改CSS样式**

上面这个问题，我可以通过添加css样式解决，但是你想呀，直接 添加css样式，你在手机上显示可以了，但是在PC端的样式是不是也给修改了，咱们自适应的前提之一就是不改变PC端网页的样式。这时候，需要咱们第二段神奇的代码：

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

这个就是css中的媒体查询，max-width 意思为 当前页面的最大宽度 满足这个条件，就会执行这里面的代码。咱们将需要修改的CSS放入这里面，上面提到的这个问题岂不是迎刃而解了。  
具体点击：[CSS媒体查询][CSS 1]

ok，咱们就写入一些代码，看看显示的结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6eDE1OTk1MQ_size_16_color_FFFFFF_t_70 5]  
嗯嗯，看着不错！ 嗯？等等，不对，我发现我写的css失效了，怎么可能呢？

body{width: 90%; padding: 0px; margin:0px; min-width:350px;}

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6eDE1OTk1MQ_size_16_color_FFFFFF_t_70 6]  
我发现我给body写的css并没有起作用。原因是优先级的问题。  
![在这里插入图片描述][20190920203549544.png]  
的确如此，和浏览器中显示的一样。  
具体优先级问题点击查看：[CSS优先级][CSS 2]  
简单来说，写在body 上方style标签内的优先级要低于 标签内的。也就是它的优先级比我高，我写的就不显示了。

也就是

我之前提过，写自适应尤其是给别人写自适应，一定尽可能不要动原来写的东西。这时候，咱们只需要通过添加！important 就可以使其优先级最高。

body{width: 90%!important; padding: 0px!important; margin:0px!important; min-width:350px!important;}

看看效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6eDE1OTk1MQ_size_16_color_FFFFFF_t_70 7]  
这次是真的不错了，大体到这里就完事了。当然还可以有更细致的改进，这里就不提了。

最后说一下如何使用手机测试网页：  
首先你得有一个本地服务器，我使用的是php的，在电脑上访问地址是  
http://127.0,0.1/test/index.php

你需要把127.0.0.1 换成你电脑的ip地址  
具体：win+R-》cmd-》输入ipconfig  
找到ipv4的地址就可以，有的显示出来两个 这两个都可以

如有疑问，欢迎大家底部留言。

[CSS]: https://www.runoob.com/css3/css3-tutorial.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6eDE1OTk1MQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/dbf9e4df8a834d8cbb4895eb6cc4e7eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6eDE1OTk1MQ_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d13868d234b947258135c95f34b667dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6eDE1OTk1MQ_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d02d3db941544cb796820c553fafe9f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6eDE1OTk1MQ_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/43f03390fbcb4d8a934012a70d6fc5b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6eDE1OTk1MQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20190920205306553.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6eDE1OTk1MQ==,size_16,color_FFFFFF,t_70
[CSS 1]: https://www.runoob.com/cssref/css3-pr-mediaquery.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6eDE1OTk1MQ_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/37dd3c92282542e78ba48246fec1a608.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6eDE1OTk1MQ_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/1184a943a2df4818babadfeda951cace.png
[20190920203549544.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/fb61f39723d04ee78197ea626d713515.png
[CSS 2]: https://www.runoob.com/w3cnote/css-style-priority.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6eDE1OTk1MQ_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20190920205557506.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x6eDE1OTk1MQ==,size_16,color_FFFFFF,t_70