如果这个问题之前已经被问过了,我很抱歉。我确信某处应该有答案,但出于某种原因,我找不到它,可能是使用了错误的搜索词。
我知道您可以使用媒体查询来针对不同的设备进行定位,例如:
@media only screen and (max-device-width: 480px) {
div#wrapper {
width: 400px;
}
}
但我想知道的是,如何根据设备类型改变我的网站设计呢?
示例
假设我的网站结构通常如下:
如果是桌面端
<div id="user">
<div id="profilePic">
<img src="images/responSiveTest/ppic.PNG" class="p-img" />
</div>
<div id="uname">
<h4 style="color:white">Welcome Guest</h4>
<p style="color:white">Please Log in</p>
</div>
</div>
现在,当用户在移动设备上查看我的网站时,我该如何更改我的 div
/ 网站布局,比如像这样做:
如果是移动设备
<div id="mobileNav">
<div id="namePic">
<!-- Mobile user -->
</div>
</div>
希望我的请求有意义,感谢这个令人惊叹的网站上的每一个人提供的帮助。