在更改窗口大小时重新调整标题大小

Question

下面是我的代码，当窗口是完整大小时，它正常工作。但是在窗口大小上，徽标和标题显示不正确。Here is my code 我是否需要更改CSS或使用bootstrap进行更改。我尝试将像素中给出的值更改为percentag。它仍然没有用。

describe('standard search', function (){
    beforeEach(function (){
        openApp();
        var searchBox = element(by.css('#inpt_search'));
        searchBox.sendKeys('test');
        browser.sleep(500);
    });
    it('should work or summat', function () {
        browser.ignoreSynchronization = true;
        var fileItems = element.all(by.repeater('item in list'));
        expect(fileItems.count()).toEqual(50);
    });
});

Answer 1

建议将所有CSS代码放在单独的文件中。

可以将图像放在H1标签内，也可以使用徽标。你会从这开始：

.heading {
  display: inline; 
}

但是，如果你只想让内容结构化并让它保持在一起......添加一个最小宽度，如下所示：

.navContent{ 
min-width: 400px;
}

Answer 2

您可以使用以下响应式css，以便它可以调整窗口大小，直到宽度为992px。在代码下方使用此代码以使其响应

/* responsive css start */
@media (min-width:992px){
.heading{ text-align: center;}
.navContent{text-align: left;float: left; padding-left:0px; padding-right: 15px; position: relative;}   
/* responsive css end */

我附上截图作为参考，您可以在其中看到它与标题内容不重叠。但其最大宽度限制限制为992px。您可以根据自己的要求进行更改。