如何像浏览器一样在 html 元素内部制作移动响应视图？

Question

我正在制作自定义 html 构建器。但我想在不打开开发工具或更改窗口大小的情况下实现响应模式用户。 https://www.mianfolio.com/ultimateblocks/v2.1.3/

上面的链接可以看到在左上角有 3 个设备选项来展示设计。如何实现这样的用户界面，以便能够在单击按钮时在移动设备或平板电脑视图上响应地查看内容？我想在一个 div 中显示所有内容。

我尝试添加类来实现，但只有 div 宽度变低。但是内容没有响应地适应其父级。我知道基于窗口大小的@media 查询。但是这家伙在 div 中实现了它。因此询问我怎样才能使其工作。

Answer 1

您可以使用 javascript。由于您提供的链接更改了div 的宽度，即#intro1，并更改了其中其他子元素的宽度、字体大小等，以显示特定的响应式设计。你能做的是

为平板电脑做出响应：

创建一个显示平板电脑图标的按钮，单击该按钮可以运行一个功能 例如：

function showTablet () {

   // first make #intro1 width to tablet device width 
   var tabletDiv = document.querySelector("#intro1");
   tabletDiv.style.width = "1020px";

   // Get child Elements and add css according to your responsive need
   // eg
   var childElement1 = document.querySelector('.just-example-child-element');
   childElement1.style.width = "50%";
   childElement1.style.fontSize = "15px";
   childElement1.style.margin = "15px";      

   // you can also add class to child elements according to your responsive design layout
   // eg
   var childElement2 = document.querySelector(".just-another-example-child-element");
   childElement2.className = "tablet-class";

   // And so on
}

为移动设备做出响应：

创建一个显示移动图标的按钮，单击该按钮可以运行一个函数 例如：

function showMobile () {

   // first make #intro1 width to mobile device width 
   var mobileDiv= document.querySelector('#intro1');
   mobileDiv.style.width = "356px";

   // Get child Elements and add css according to your responsive need
   // eg
   var childElement1 = document.querySelector(".just-example-child-element");
   childElement1.style.width = "50%";
   childElement1.style.fontSize = "15px";
   childElement1.style.margin = "15px";      

   // And so on
}