【web前端】pc网页适配移动网页和css布局之间的矛与盾

末蓝、 2023-07-25 12:59 7阅读 0赞

**最近在写一个前端的网站，主要结构是html和css写法，当然还加了部分js内容，但是写完之后发现只写了一种css样式，只能在电脑版网页完整显示，而在手机小屏设备显示格式就乱了，出现只能显示电脑的内容。**

**来看看惨案![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQxNDQ5MA_size_16_color_FFFFFF_t_70_pic_center]**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQxNDQ5MA_size_16_color_FFFFFF_t_70]

## 1.不仅仅只是一串代码就能适配手机 ##

## 2.多种css样式最佳方案 ##

## 3.需要更改部分 ##

下面一个个来讲解：

## 1.适配问题 ##

在`<body>`下面加入下列代码块：

注意在user-scalable=yes这段可以自定义修改，yes表示可以对手机端网页缩放，而改成no，则不能缩放  
**加完还不算完事…因为你显示可能就是（如下图所示）：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQxNDQ5MA_size_16_color_FFFFFF_t_70 1]**  
就问你强制适配是不是很low，也很丑…

所以接下来就是正题了：

## 2.css多种布局： ##

**1.固定布局**  
也就是说要自己去定义宽高（用px表示），还有固定的显示，这种的好处不会随电脑屏幕大小而随便改变布局模式，坏处就是在手机端显示可能就一言难尽了。  
**2.流布局**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQxNDQ5MA_size_16_color_FFFFFF_t_70 2]  
像流水一样的布局，优点可以自动适应各种不同的屏幕显示，缺点嘛，乱不乱就是系统来控制的了。  
怎么写？找教程学，博主这里就不介绍了  
**3.响应式布局**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQxNDQ5MA_size_16_color_FFFFFF_t_70_pic_center 1]

是不是很酷，是的可以很好适配多款屏幕，但是要多些好两三个css文件，不过目前也就两种主流屏幕尺寸，就是手机屏幕和电脑屏幕，最多也就一个平板嘛，每个css样式都可以自定义，真是多举多得啊。  
**好了，还有其注意的点我会把学习地经验一步步讲解，如有错误的，恳请大佬指出不足。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQxNDQ5MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/6cf9e7fd3a5944fa9a9673fa2fbd3714.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQxNDQ5MA_size_16_color_FFFFFF_t_70]: /images/20230528/0ae07bee2f6e4f97b2f95a177c028393.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQxNDQ5MA_size_16_color_FFFFFF_t_70 1]: /images/20230528/6b986ea6804f44bbb25b1677995500d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQxNDQ5MA_size_16_color_FFFFFF_t_70 2]: /images/20230528/bd56ac8cc96c4715843a469ebbba1eee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQxNDQ5MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230528/37c26a483a4b428eba09199b9ae69576.png