html - 手机访问网站时如何改变div的位置

Question

所以，我有两个 div，一个在左侧并包含垂直菜单，另一个在右侧。有谁知道当有人使用手机访问网站时，我怎样才能把左边的菜单放在顶部并使其成为水平菜单？ 这是我为这两个 div 设计的 CSS，左边是 levi，右边是 desni。谢谢!

    #levi{
    width:25%;
    height:100%;
    background-color:#f4654e;
    position:fixed;
    max-width:90%;
    }

    #desni{
    position:absolute;
    left:25%;
    overflow: auto;
    width:75%;
    left:value;
    float:left;
    height:100%;
    }

Answer 1

就像 mdesdev 上面评论的那样，你要找的是“媒体查询”

@media (max-width:768px) { 
    Mobile specific CSS goes here... 
}

或者，如果您的移动设备专用 CSS 有一个单独的样式表，那么您可以像这样链接到它:

<link rel="stylesheet" media="(max-width: 768px)" href="mobile_specific.css" />

有关如何使用它们的更多信息，请参阅此链接:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

此链接可获取有关特定屏幕宽度的更多信息(有点过时，但仍然有用):

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/