如何使我的自定义 HTML 小部件针对不同的屏幕尺寸显示不同？

Posted 2023-03-06

【中文标题】如何使我的自定义 HTML 小部件针对不同的屏幕尺寸显示不同？

【英文标题】：How can I make my custom HTML widgets show differently for different screen sizes?

【发布时间】：2018-02-25 06:00:54

【问题描述】：

请耐心等待——我正在尝试学习 html/CSS。

我有这个指导网站，dropshipstepbystep.com。我想在我的主页上列出“成功的 3 步”，因此我在 Zerif Lite 主题的“我们的焦点”部分创建了自定义 HTML 小部件。我确信我这样做的方式非常糟糕，但在我的桌面上，我几乎实现了我想要的外观。

现在我需要能够更改小部件/块的显示方式以适应较小的屏幕尺寸。我知道我不能对 @media 使用内联 CSS，那么我应该怎么做呢？

请像我 5 岁一样解释。提前谢谢！

PS：不知道它是否有帮助，但这是我编写第一个自定义 CSS 小部件的方法...

<div style= "padding-top: 25px; width: 100%; display: block; margin-bottom: 50px;">
<div style="width:78%; padding-right: 2%; display: inline-block; float: left;">
<h4 style="align: left; line-height:1.5;">Hey!  I'm Zach, and I created Dropship Step by Step to show you exactly how I build and execute a dropshipping project in 2017.  If you find my content useful, I have two things to ask of you: (1) Share it with anyone you know who would also find it valuable, and (2) if you choose to use a service I recommend, please <u>click</u> the link I provide.  Some of the services I recommend pay me referral credits, which is how I keep my content free.  If you don't click, they can't track!</h4>
</div>
<div style="width:18%; padding-left: 2%; display: inline-block; float: left; height: 100%; vertical-align: middle;">
<img src="http://www.dropshipstepbystep.com/wp-content/uploads/2017/09/IMG_4701.png" style="margin-top: -25px; border-radius: 50%;">
</div>
</div>
<div style="display: block;">
<h1 style="padding-top: 50px;"><u>
3 STEPS TO DROPSHIP SUCCESS</u>
</h1>
</div>
<div style= "padding-top: 25px; width: 100%; display: block; margin-bottom: 100px;">
<div style="width:33%; padding-right: 2%; display: inline-block; float: left;">
<img src="http://www.dropshipstepbystep.com/wp-content/uploads/2017/09/Screen-Shot-2017-08-25-at-10.23.39-PM_clipped_rev_1-8.png">
</div>
<div style="width:63%; padding-left: 2%; display: inline-block; float: left;">
<br><h2 style="font-weight: bold;">Find a Product to Sell</h2>
<p style="align: left; line-height:1.5;">I'm going to show you how I find inspiration for product ideas, and how I test my ideas quickly.  The goal is to take something generic and cheap looking, then market in a way that will totally change people's perceptions.  The dash cam on the left is a perfect example.  I get them for $20 and sell them for $60, and they're actually really nice!  I use one myself.</p>
<p style="align: left; line-height:1.5;">You can find many inexpensive products to promote for free via <a href="http://dropshipstepbystep.com/go/aliexpress">AliExpress</a>.  Alternatively, <a href="http://dropshipstepbystep.com/go/salehoo">SaleHoo</a> will tell you exactly how well products are selling around the web, at what profit margin, and what supplier will dropship them for you ($69/year).  Plus,
 you can find American-based suppliers, so your customers don't have to wait weeks for products to arrive.</p>
</div>
</div>

【参考方案1】：

解决问题的最佳方法是 Bootstrap 中的网格系统。你可以在这里找到相关信息-https://v4-alpha.getbootstrap.com/layout/grid/ 以及其他各种教程。 对于小型、超小型和中型设备，您基本上只需在屏幕上为小部件分配所需的空间。

除此之外，如果您想在屏幕上分隔元素，您可以使用 flexbox。也有各种可用的教程。

两者可以一起使用。我相信您将能够使用 Bootstrap 解决您的问题。

【参考方案2】：

您应该从学习 CSS 媒体查询以及如何使用它来进行响应式网站开发开始。我建议你可以从 W3Cschool 学习，下面是参考链接： https://www.w3schools.com/css/css_rwd_mediaqueries.asp

【参考方案3】：

首先请使用来自外部文件的 CSS。目前，您正在使用在 @media 查询中难以使用的内联 CSS。 布局完成后，对不同的设备使用 @media 查询。