代码之家 › 专栏 › 技术社区 › WebMan

如何像浏览器在html元素中那样创建移动响应视图?

css html jquery javascript

WebMan · 技术社区 · 7 年前

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

上面的链接可以看到在左上角有3个设备选项来显示设计。我如何实现这样的用户界面,以便能够通过单击按钮在移动设备或平板电脑上查看内容?我想展示一个小隔间里的一切。

我尝试过添加类来实现,但只有div宽度变小了。但内容并没有相应地适应其父内容。我知道基于windows大小的@media查询。但是那个家伙在div中实现了它。因此他问我如何才能让它也工作。

1 回复 | 直到 7 年前

Sahil Raj Thapa 7 年前

你可以使用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
}

推荐文章