带你一步步从PC（电脑）网页自适应到手机端网页（小白入门必看）
最近帮老师改个网站，将PC端网页改为手机端网页，虽然对于有一定开发经验的前端开发者是很easy的事情，但是呢，对于小白来说，还是很一头雾水的。下面咱们就从头来进行实战，看看自适应到手机端到底是怎么回事！
开发必备工具：
chrome浏览器
一部手机
CSS手册（推荐菜鸟教程-CSS手册）
好了，咱们开始吧！
1、首先我先在电脑上打开网页
2、接下来使用chrome浏览器自带的手机模拟器看看这个网页在手机上显示的效果。（按F12或者点击浏览器右上角三个小点-》更多工具-》开发者工具）
点击这个红框，就会显示模拟手机的样子
第一个是可以选择手机类型，第二个可以调整手机的宽度和高度，第三个可以选择放大缩小比例。
好了，如果你拿着手机这样看网页，是不是很不舒服，进行操作也十分难受。
3、自适应第一步，添加meta
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 1
这是个什么意思呢，通俗将就是等比例缩小了，按照你设备的宽度。
下面是一些具体的参数和意义（刚入门不用记太多）
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width
为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。 minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
咱们看看加入这段代码（对了，把这段代码加入到head后面），页面出现了什么变化
这样看起来是不是比之前看着舒服多了。我在真实的手机上跑一下，看看是什么效果
大家可以看到，右边有一部分缺失，需要向左滑动才行。这是肯定不行的，咱们的最终目标是将这个登录页面显示在手机的中心。
4、修改CSS样式
上面这个问题，我可以通过添加css样式解决，但是你想呀，直接 添加css样式，你在手机上显示可以了，但是在PC端的样式是不是也给修改了，咱们自适应的前提之一就是不改变PC端网页的样式。这时候，需要咱们第二段神奇的代码：
@media screen and (max-width: 720px) { } 123
这个就是css中的媒体查询，max-width 意思为 当前页面的最大宽度 满足这个条件，就会执行这里面的代码。咱们将需要修改的CSS放入这里面，上面提到的这个问题岂不是迎刃而解了。
具体点击：CSS媒体查询
ok，咱们就写入一些代码，看看显示的结果
嗯嗯，看着不错！ 嗯？等等，不对，我发现我写的css失效了，怎么可能呢？
body{width: 90%; padding: 0px; margin:0px; min-width:350px;} 1
我发现我给body写的css并没有起作用。原因是优先级的问题。
的确如此，和浏览器中显示的一样。
具体优先级问题点击查看：CSS优先级
简单来说，写在body 上方style标签内的优先级要低于 标签内的。也就是它的优先级比我高，我写的就不显示了。
也就是
<style type="text/css"> 优先级小 <style> <p style=" 优先级大"></p> 12345
我之前提过，写自适应尤其是给别人写自适应，一定尽可能不要动原来写的东西。这时候，咱们只需要通过添加！important 就可以使其优先级最高。
body{width: 90%!important; padding: 0px!important; margin:0px!important; min-width:350px!important;} 1
看看效果：
这次是真的不错了，大体到这里就完事了。当然还可以有更细致的改进，这里就不提了。
最后说一下如何使用手机测试网页：
首先你得有一个本地服务器，我使用的是php的，在电脑上访问地址是
http://127.0,0.1/test/index.php
你需要把127.0.0.1 换成你电脑的ip地址
具体：win+R-》cmd-》输入ipconfig
找到ipv4的地址就可以，有的显示出来两个 这两个都可以
如有疑问，欢迎大家底部留言。
相关知识
web网页设计实例作业 ：鲜花商城网站主题——浪漫红色大气自适应网上鲜花店网页设计(16页) HTML+CSS+JavaScript
【自适应手机端】花卉网站模板，鲜花网页设计及源码
html+css+javascript满屏雪花爱心520表白网站 (含音乐)520告白/七夕情人节/生日礼物/程序员表白必备...
网站开发网页
HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript)
HTML+CSS网页设计期末课程大作——篮球网页设计(6页) 学校篮球网页制作模板 学生简单体育运动网站设计成品
❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript
炫酷3D相册❤ 520七夕情人节表白网页制作❤(HTML+CSS+JavaScript)
不再困惑，响应式网页设计一篇读懂！
HTML+CSS+JavaScript 超具创意的网页生日快乐祝福网页模板
网址: 带你一步步从PC（电脑）网页自适应到手机端网页（小白入门必看） https://m.huajiangbk.com/newsview948661.html
| 上一篇: Vue 3 + Element |
下一篇: pc端与移动端适配 解决方案一般 |
