如何让HTML在线页面响应式_HTML在线页面响应式设计与适配方案

你所说的，我在建立网站的过程中遇到了很多问题。
不过你的总结已经很完整了。
我给大家讲一个我碰壁时的具体情况。

2 008 年，当我第一次进入这个行业时，我找了一份工作，为一家购物中心创建了一个在线促销页面。
客户要求在手机上看到他们。
那时候的需求没有现在这么大。
我只是乱搞了一下，放了一个固定宽度的导航栏，6 00像素。
结果呢？手机上只有一堆，用户根本无法点击它们。
然后我的老板着急了，所以我很快就学会了Flexbox。
我记得逐行浏览 W3 C 文档来创建自适应导航。
效果出来了，但是代码看起来很乱，我花了几天时间调试它。

回到你提到的：
1 Viewport标签，这个很重要。
当我在商场的促销页面工作时，我忘记添加这个标签。
导致在iPhone上打开时，页面像豆子一样缩小，用户必须不断放大，稍后再添加即可。
记得当时我跟客户解释了半天为什么要加上width=device-width，但客户却一头雾水。

2 灵活的布局，Flexbox和Grid现在被越来越多地使用。
2 01 2 年我接手了一个政府网站项目，需要在平板电脑和电脑上查看。
当时网格还没有流行，所以我使用 Flexbox 创建了两列布局。
后来，用户反映在窄屏手机上有点拥挤，所以我添加了媒体查询并将第二列更改为堆叠。
现在代码看起来很难看。

3 有媒体调查，这绝对是一个神器。
我在电子商务网站上工作了 1 5 年，我依靠媒体查询来使它们适应不同的屏幕。
我记得我在7 6 8 px处下了断点。
导航栏在手机上是垂直的，在平板电脑和电脑上是水平的。
后来用户说要适配小屏手机，所以我加了一个最大宽度断点：4 8 0px。
那段时间我改了代码，直到秃头。

4 响应式图像，我也遇到了这个问题。
我2 01 8 年在那个旅游网站工作过，有很多图片和资料。
起初，我直接使用 max-width:1 00%，但发现在高分辨率屏幕上图像模糊。
然后我学会了聪明一点，利用不同分辨率的srcset属性来指定不同尺寸的图片。
现在好了，用户体验更好了，但是维护起来确实很痛苦。

5 常见错误，你是对的。
固定像素宽度绝对是禁忌。
我有一个项目，用户不断抱怨手机上显示不完整。
经过检查，发现某些模块的宽度是固定的5 00px。
换算成百分比后，问题就解决了。
过度依赖媒体调查也很容易。
我有一位同事，每当他遇到布局问题时，他都会添加媒体查询。
结果，代码变得更加臃肿。
然后，我建议他使用网格，这突然变得更容易了。

一般来说，响应式设计是一个不断尝试和错误的过程。
你总结的就是我踏入陷阱后的全部经验。
现在我觉得这样做很舒服。
然而，新技术层出不穷。
就像最近的 CSS Grid，我还是有点害怕随意使用，怕出问题。
我需要进一步研究这个问题。

希望我的经验对你有帮助，不要像我当年那样碰壁。

html能写出适合手机屏幕访问的页面吗

说实话，刚开始接手这个任务的时候，我对于热情是很困惑的。
但经过几年的工作，我发现了核心的几个技巧。
关键在于把工作扎扎实实做好。

以去年的电子邮件政策为例。
客户坚持要分别做PC版和手机版，我被迫阻止。
继续保持正确的热情，会有什么效果呢？维护成本节省一半以上。
后来客户还要求提供迷你版的程序，说体验比单独做要好。
从那时起，我意识到早一点和晚一点活动总比不活动好。

在技术层面上，我们需要做百分比。
我在开发时有固定基础宽度的习惯，比如桌面限制为7 6 8 px，PC限制为1 02 4 px。
记得有一次实验的时候，老浏览器固定了容纳百分比，最后改成固定宽度，很无聊。
因此，技术的选择应该立足实际，而不是听信最新的趋势。

HTML5 和 CSS3 并不是今天才真正存在的。
我们有一个项目，客户要求 iPod touch 支持 3 D 效果。
一开始我们想过用JS来实现，后来发现CSS3 的3 D变换可以直接完成，并且兼容性更好。
对于媒体提问，我有一个小技巧。
我将常见的倒置字符设置为变量，例如@media (max-width: 7 6 8 px) {...}。
通过改变设计，我可以直接改变变量的值，这是有效的。

但归根结底，响应式开发最重要的考验还是对个别事件的控制。
测试过程中，该元素在Android手机上显示正常，但在iPhone上却显示为半个像素。
最后发现是CSS3 calc函数没有正确使用。
如果我没有耐心，我真的做不了这样的工作。