小编mrC*_*ean的帖子

我正在用AngularJS和SCSS编写一个站点.我处于移动阶段的开发阶段,我很快发现(对于这个项目)我需要一种方法来使用@media查询来定位多个断点.所以我通过这个SO答案和这个CSS Tricks Post以及SO上的其他多个答案找到了.然后我将我发现的解决方案实现到测试用例中,请参阅下面的代码片段进行测试.

main {
    background-color: grey;
    height: 100%;
    min-height: 1000px;

    @media (max-width: 992px) {
        background-color: red
    }

    @media (max-width: 768px) {
        background-color: lightcoral
    }

    @media (max-width: 992px), (max-width: 992px) and (orientation: landscape) {
        background-color: lightgreen;
    }

    @media (max-width: 768px),
    (max-width: 768px) and (orientation: landscape) {
        background-color: lightblue;
        // Reset the min-height here, because we no longer have the sticky search bar.
        min-height: 450px;
    }
}

<main>
    <h1>Page Title</h1>
    <h2>Some Descriptive information</h2>

    <div>Content</div>
</main> …

我对 Flexbox 很陌生，因为我的工作需要支持 IE8，所以在这个项目之前我从来没有真正关心过它。

我试图弄清楚如何使“卡片”网格具有相同的高度。这些卡片内部包含不同数量的文本以及图像。由于我使用 AngularJS，JavaScript 解决方案的复杂性超出了我的时间，因此我选择了 flexbox。

这是我的卡片包装器的相关代码（如果您需要更多，请告诉我）：

.card-grid {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;

    ...

    .data-card {
        height: auto;
        //IE fallback
        display: inline-block;
        //Modern Browsers
        display: -webkit-box;      /* OLD …

我正在开始一个新项目,我们的任务是创建一个通用标题.这意味着在我们拥有的不同域/服务器,客户创建的站点和第三方站点上,我们需要一种非常简单的方法将此代码提供给人们.

此通用标题还将包含一些搜索功能,这与我的问题略有关系.简而言之,它将包含JavaScript以更改action其<form>元素的属性,具体取决于下拉选择,以及提交表单.

我们想报头工作,方式是,它生活在一个位置,我们正在考虑某种形式的HTTP请求,以获得头.在我们看来,这将最大化Universal Header的可移植性.

标题需要与WordPress(不是问题)很好地集成,而且在AngularJS中,在我们的讨论中,不太确定是否可行.因此,搜索功能的"略微相关"部分.

我们谈到的其中一个解决方案是在HTML中这样做,就像这个答案一样,但我总是对通过HTTP请求原始HTML并将其转储到页面中更加怯懦,但也许这是正确的方法,但也许不是吗？由于我们不确定,我们考虑了JIRA Issue Collector,它们基本上将JavaScript流式传输给他们的客户,然后构建问题跟踪器按钮,固定在页面的一侧,其中包含一些HTML,CSS和JS.然后,用户可以单击此按钮,打开准备提交的表单.这可能是一个过度简化,但基本上,他们的JS片段包HTML/CSS/JS并将数据提交到他们的服务器.

这是我们喜欢的方向:单个文件包含我们需要的所有内容.但是,我想知道一些事情:

• 有哪些模式可以处理标题的"闪存"？由于在页面加载时它是AJAXed,标题将丢失然后突然出现,你怎么能处理这个可用性问题？我想的是一个标题区域的Skeleton区域,然后让JavaScript替换它,但我不知道这是否是陈词滥调.
• 什么是将HTML,CSS和一些JavaScript功能的创建捆绑在一个文件(如JS文件)中的标准方法,或者更好地将HTML文件链接到JS和样式表？我只是不确定捆绑件.我们不会在这个项目中使用Angular或React,但我对Webpack有一些熟悉,看起来它可以完成这项工作.即使这个项目不使用Angular或React,它仍然需要与其他框架集成.
• 我正在考虑的一件事可能是将HTML分解为单独的HTTP请求,并将JavaScript和样式捆绑在另一个HTTP请求中 - 几乎就像一个Web组件.换句话说,我们可以并行请求HTML和CSS/JS,当它返回时,只需在UI中将它粉碎在一起.这样做会有什么危险,或者在做这样的事情时要考虑一些事情？
• 将此与AngularJS集成的好方法是什么？由于此标题中将包含搜索功能,因此当有人提交搜索时,我们需要某种方式广播(到AngularJS),以及他们提交的搜索内容.

最初,对于上面的最后一点,我想把它附加到一个window物体上.然后在JavaScript中创建自定义事件处理程序 - 但是你如何做到这一点？也许下面的伪代码是偏离基础的,但这就是我问这个问题的原因:

/// inside the SearchController in AngularJS
$scope.defaultRealm = 'products';

/// to select default realm
document.when('angularJSLoads', function () {
    document.getElementById('universial-header').find('.dropdown', function () {
        // put actions to select $scope.defaultRealm in the dropdown options.
    })
})

/// to search in own defaultRealm
document.querySelector('.dropdown').onEvent('headerSearch', function (e) { …