在HTML中的响应式设计

-5

我想制作一个网站，我正在使用“手风琴”作为我的大屏幕设备（> 750像素）的设计，并且我想为小设备使用不同的设计（常规按钮）。我研究过如何将差异设计应用于不同的屏幕尺寸，但如果连我的html内容都不同，也不知道该怎么做。任何人都可以请帮助我如何我的html语法应该为这两个不同的内容？在HTML中的响应式设计

来源

2016-07-04 Anish Raina

对不起，Stackoverflow不是一个免费的编码服务，但是，有很多，很多很多关于如何开始使用html，css的教程和JavaScript。花费一些努力和时间来理解，但以这种方式学习是非常有益的！尝试把一些时间放进去，并且遇到任何你总是被欢迎在这里问的问题。 –

我已经在html css和Js上完成了许多在线课程，但是他们都没有教会我使用响应式设计来改变html内容。他们只教会如何使用媒体查询来改变CSS内容。 –

您可以使用媒体查询将CSS规则调整为不同的屏幕尺寸。

这是一个名为“TestClass的”

@media screen and (max-width: 650px){ 
    .testClass{ 
       color: blue; 
    { 
}

来源

2016-07-04 11:25:47 Joonas89

是的，但假设我使用两个div（一个用于手风琴，一个用于按钮）。如何隐藏大屏幕设备上的按钮，只显示手风琴，只显示小屏幕设备上的按钮并隐藏手风琴。 –

您可以在媒体查询中添加尽可能多的规则。您也可以进行多个媒体查询 – Joonas89

如果你想不同的HTML，你可以做的是使两个部分内容是basicly相同，但

@media screen and (min-width: 750px){ 
    .smallClass{ 
       display:none; 
    { 
    .bigClass{ 
       display:block; 
    { 
}

类的一个实例这样它根据你的屏幕宽度在块之间切换

来源

2016-07-04 11:29:14

这就是我一直在寻找的。非常感谢。 –

没问题！希望它能帮助你完成你的其他项目。祝你好运。 –

在HTML中的响应式设计

回答

相关问题