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

最新推荐文章于 2024-08-27 16:31:14 发布

声希味淡

最新推荐文章于 2024-08-27 16:31:14 发布

阅读量339

点赞数 1

分类专栏：前端文章标签： html css web js html5

本文链接：https://blog.csdn.net/weixin_45414490/article/details/105531717

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

来看看惨案
在这里插入图片描述

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

2.多种css样式最佳方案

3.需要更改部分

下面一个个来讲解：

1.适配问题

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

 <meta name="viewport" content="width=720,initial-scale=0.5, minimum-scale=0.1, maximum-scale=1.0, user-scalable=yes"/>

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

所以接下来就是正题了：

2.css多种布局：

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