Question

我从来没有真正对前端设计很好，我在这里遇到了一些问题。我想要实现的目标是使网站标题仅在移动设备上修复说

<div class='row' id='header' >&nbsp;</div>

我可以使用bootstrap和Foundation，因为我熟悉它的基础知识，但我无法理解我想做的事情。我希望标题div仅针对移动设备进行修复，以便当您从大屏幕/计算机访问时它不固定并且随着滚动一起流动，但只有移动设备才能保持固定在顶部。现在我可以简单地用Jquery更改css属性但我不知道如何查找并检查设备是否有大屏幕或小屏幕

if(deviceScreen==big){//keep it relative/absoolute} else //make it fixed

如果可以用css完成，我不仅仅喜欢这样做。

我在这里遇到的另一个问题是固定元素（特别是只为小型设备/主导航出现的侧边栏变成侧边栏）我希望它固定在左边但是可以自己滚动某些选项不可见，因为它们不适合屏幕。我真的需要帮助，这个网站并没有由我开发。我被聘请做一些后端更改，并且需要修复一些前端错误，这里提到

Answer 1

使用CSS媒体查询来确定屏幕大小。

如果我们说屏幕不超过600像素：

@media (max-width: 600px) {
     #header {
           position:fixed;
           top:0;
     }
}

此屏幕的css规则仅在屏幕不大于600时应用。然后将其设置为固定为顶部。

您可以向单个dom元素添加多个meda查询，并在用户更改浏览器宽度时根据您的需要进行调整。

有关媒体查询的更多信息：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 2

您只需使用css（媒体查询）

即可

这是演示： http://jsfiddle.net/3cndjsx1/

 @media (max-width: 600px) {
    header{
        position:fixed; 
        z-index:2;   
    }

    footer {   
        position:fixed; 
        z-index:2;
    }

 }

Header（您可以根据您的代码更改选择器）和footer（您可以根据代码更改选择器）将固定为屏幕尺寸减去600px（您可以还会更改css Media Queries）

中的屏幕尺寸

Answer 3

最好的方法是TabControl.Multiline Property。

您还应该使用640px：

Context menu

这是一个链接，您可以在其中看到media queries。

Answer 4

如果媒体查询足以接近目标设备，我建议你使用方向，就像这样......

class Category {
 hasMany = [items: Item]
}

class Item {
  belongsTo = [category: Category]
}

...因为您可能不希望固定菜单显示在水平移动设备上。

使用JS和CSS使标题仅针对蜂窝媒体进行修复

4 个答案: