javascript - 如何像浏览器在 html 元素内部那样制作移动响应式 View ？

Question

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

上面的链接可以看到在左上角有 3 个设备选项来显示设计。我如何实现这样的用户界面，以便能够在单击按钮时在移动设备或平板电脑 View 上响应地查看内容？我想在一个 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
}