怎么用Hbuilderx做网页设计的响应式？

时间：2024-02-14 06:55:01 | 来源：网站运营

时间：2024-02-14 06:55:01 来源：网站运营

怎么用Hbuilderx做网页设计的响应式？：

亲身实践总结，内含响应式布局的关键代码分享，可供大家收藏借鉴。

做响应式网页，本质不在于用什么软件，而是要学会灵活运用CSS3的@media媒体查询，设置好屏幕宽度的分界点，然后根具不同的媒体屏幕宽度，单独设置样式。

比如我之前做的这个【全链路UI设计网】，就采用了响应式布局，网页完全兼容大尺寸的PC、iPad pro、iPad、最新的iPhone，以及更早的iPhone SE，总之就是根据网页可能出现在的设备中，我都单独做了CSS样式微调，以确保用户都能看到一个体验完整的网页，虽然我的前端技术很一般，但是我能想得到的点，我一定会把它做得最好。

PC端 尺寸

这个网站首页，在电脑PC端呈现的是下图样式：

△此时导航栏处的logo、slogan、目录、报名咨询按钮得到完全展示，符合鼠标精准点击的交互习惯。这种样式的呈现，是基于【屏幕宽度＞1300像素】来设置的，导航栏<header>标签下的.container容器宽度，以及其他DIV布局下的.container容器宽度都被被限制在1206px。

这就是针对PC端实现响应式布局的关键CSS样式：

/* PC端的单独样式，写在里面就可以了*/@media (min-width: 1300px){ .container { width: 1206px; }}

iPad Pro尺寸

然后，当屏幕宽度缩小，就过渡到了iPad pro的尺寸时，由于ipad pro本身尺寸也不小，所以网页整体布局并没有太大变化，只是在此种情况下【992像素 < 屏幕宽度 < 1299像素】，我将主标题的字号减小了，同时视频右侧的课程目录列表相对于PC版省略了【课时】两个汉字，让整个版面显得不那么拥挤。这同样只需用HTML+CSS配合，即可实现，得到如图：

同样的，此时DIV布局下的.container容器宽度都被被限制在1206px。这就是针对iPad端实现响应式布局的关键CSS样式：

/* iPad pro端的单独样式，写这里面就可以了*/@media (max-width: 1299px) and (min-width: 992px){ .container { width: 970px; }}

iPad尺寸

当屏幕宽度缩小到到 768px~991px时，就让网页的宽度匹配ipad竖屏的屏幕宽度，此时网页会呈现出下面这样的样式，

△注意看，此时的导航栏右侧的目录，已经被隐藏起来了，点击右上角按钮可展开菜单。与此同时，页面字号变得更小了，立即报名、报名咨询按钮，则出现在了屏幕底部，符合ipad手指点击交互的规律。还有就是课程目录，从之前的【视频右侧】变换到了【视频下侧】列表横向排列。

此时的HTML文档，依然是之前那个文档，只是针对当前的屏幕尺寸状态，单独设置了其CSS样式，就可以达到如此适应iPad设备的效果，所以，什么是响应式？这这这这这就是。

这就是针对iPad端实现响应式布局的关键CSS样式：

/* iPad端的单独样式，写这里面就可以了*/@media (max-width: 991px) and (min-width: 768px){ .container { width: 970px; }}

iPhone尺寸

然后，同样的套路设置手机屏幕的媒体查询分界点。当屏幕小于ipad宽度尺寸，就可以让网页的宽度去匹配手机的展示特性了。

/* iphone以及手机端的单独样式，写这里面就可以了*/@media ( max-width: 767px){ .container { width: 95%; }}...

如此往复，直到通过media媒体查询，设置完最小设备iPhone SE的单独样式，这个网页基本上就做到了全面兼容了。期间，需要注意要分离共用CSS样式，以减少重复代码，提升网页性能。

特殊情况的响应式

如遇个别特殊情况，可以配合JavaScript来处理响应式，我的原则是：CSS3能解决的，尽量不用JS。比如在这个网页中，详情页的配图，有两套，一套是适应大屏幕（PC+iPad pro），如图：

一套是适应移动小屏幕（iPad + iPhone、以及更小设备），如图：

如果说，只是单纯的通过CSS的@media查询来判断屏幕宽度，然后用CSS的【display:none】或【display:block】去响应不同状态下详情图的隐藏或显示，那么这两套图在页面被访问时，都会同时加载，这必然会耗费更多服务器资源，影响网页打开速度。

而用户单次访问网页的设备尺寸通常都是固定的，没有谁会像我一样，拖着窗口变来变去，所以，基于此种情况下，我只需要反馈用户当下设备、当下窗口尺寸所需要的详情图即可了，而不必两套图都给他。所以，在这个网页单页中，我就要结合了JS，来删除用户不需要的详情图节点，相应不同设备的样式需求，同时亦能提升网页性能。

这种单页HMTL文档中，我觉得这应该是最直观的处理方式了吧。当然了，在我认知之外，也许还有更好的技术处理方式，但在我的前端技术真的很一般，能分享的就这么多了。

更多Demo

我曾用类似的@media媒体查询的响应式布局思路，还曾编写过的这些网页，大家可以前往查看体验。如需系统学习HTML+CSS知识，可以参考这个《html+css网页前端课程》。

望以上，对大家有所帮助。

---

关于我（ @酷coo豆 ）

我是靠自学平面设计、UI设计、网页前端进入互联网行业的个人站长。我在本站，热衷于传播平面设计、互联网IT的基础知识，乐于分享自学设计的相关经验、书籍、教程，我相信只要能找到优质的自学教程，人人都可以成为理想中的自己。

（完）