如何设置元素的宽度等于设备宽度？

我想要我的网站的标题采取尽可能多的宽度作为显示器的屏幕。我试过给width: 100%，width: vw和width: device-width。所有这些问题是，当我调整浏览器窗口的大小时，标题的宽度等于当前视口而不是设备宽度。该代码如下：如何设置元素的宽度等于设备宽度？

body { 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: courier; 
 
    color: white; 
 
} 
 
header { 
 
    display: block; 
 
    height: 150px; 
 
    width: device-width; 
 
    background-color: #666633; 
 
    text-align: center; 
 
} 
 
header h1 { 
 
    font-size: 2em; 
 
    color: white; 
 
} 
 
nav { 
 
    width: auto; 
 
    margin: auto; 
 
    margin-top: 20px 
 
}

<header> 
 
    <h1 class="heading"> Syco Scientist Records </h1> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="anupamindex.html" class="active">Home</a> 
 
     </li> 
 
     <li><a href="ourwork.html">Our Work</a> 
 
     </li> 
 
     <li><a href="testimonials.html">Testimonials</a> 
 
     </li> 
 
     <li><a href="projects.html">Projects</a> 
 
     </li> 
 
     <li><a href="contact.html">Contact Us</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>

正如你可以看到当调整浏览器窗口没有选择滚动。如果我以像素为单位给出宽度，那么导航栏不会折叠，并且可以在滚动到右侧时看到。

如何设置标题相同显示器屏幕宽度的宽度，即使在调整浏览器窗口？

只有这样我认为这是可能是使用设置首标不同的宽度，每个监视器宽度@media媒体queuries。

是否有非移动平台device-width任何类似？

来源

2016-03-08 user31782

你尝试使用bootstrap吗？ –

@haithamsha不，我没有使用Bootstrap。 – user31782

vw是“视口宽度”。你想计算超出浏览器边界或.... 100vw是字面上视口宽度的100％。不能变得更宽。 – Phix

为了获得屏幕大小不是浏览器宽度，您将需要JavaScript。您可以使用

screen.width

（http://www.w3schools.com/jsref/prop_screen_width.asp）然后，你可以用它来设置使用javascript容器的宽度。

注：你可能有

来源

2016-03-20 13:48:40 Fox

操作系统之间存在一些差异，你可以使用JavaScript

检查这个例子

<script> 
var txt = ""; 
txt += "<p>Total width/height: " + screen.width + "*" + screen.height + "</p>"; 
txt += "<p>Available width/height: " + screen.availWidth + "*" + screen.availHeight + "</p>"; 
txt += "<p>Color depth: " + screen.colorDepth + "</p>"; 
txt += "<p>Color resolution: " + screen.pixelDepth + "</p>"; 

document.getElementById("demo").innerHTML = txt; 
</script>

来源

2016-03-22 11:40:51 Sherin

只需使用width: auto管理的屏幕尺寸。它会根据填充来调整你的宽度。

来源

2016-03-22 21:12:55

请尽量将不使用JavaScript

div 
    { 
     width: 100vw; 
     height: 56.25vw; 
     background: pink; 
     max-height: 100vh; 
     max-width: 177.78vh; /* 16/9 = 1.778 */ 
     margin: auto; 
     position: absolute; 
     top:0;bottom:0; /* vertical center */ 
     left:0;right:0; /* horizontal center */ 
    }

或

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

来源

2016-03-23 07:12:29 Sherin

使用meta标签首先为孔HTML正文，那么你可以使用：100％。

来源

2016-03-23 12:47:41

我会用：

width: 100vw; display: inline-block;

或者我将与display: flex;试图检查你没有任何地方（对父母）position: relative。

来源

2016-03-23 21:43:05 Darex1991

不会没有JavaScript的工作，但它只有三根线... 这里有一个小提琴：https://jsfiddle.net/0yL3fbyf/

我得到的屏幕宽度，把它放在一个变量，并添加“PX”到号码：

var x = screen.width + 'px';

然后，我将该变量作为width分配给标题。我给了标题中的ID，因为某种原因getElementsByTagName("header")没有工作：

var y = document.getElementById('my_header'); 
y.style.width = x;

来源

2016-03-24 00:02:28 Johannes

没有的jQuery/JavaScript的它可能很难，你需要一个元素的宽度/高度匹配。选项可以在设备屏幕宽度/高度上设置100％或硬编码。谢谢。

来源

2016-03-24 19:29:46 samdroid

-1

将属性height: auto;添加到标题，因为它可以让您的代码根据使用的屏幕灵活调整高度。所以，现在你使用任何设备，你的标题高度会相应地自动调整。

来源

2016-03-26 01:39:40 Manish62

由于添加属性'height：auto;'是冗余的，因此我投了弃权。自动是分配给高度属性的默认值。 – user31782

诸如vw（视口宽度），vh（视口高度），vm（视口最小）等相对值非常适合屏幕等设备尺寸和分辨率未知或可能发生变化的设备。

px，em &％是可用于屏幕设计的值。尝试不同的值并看看。谢谢。

来源

2016-03-31 00:16:49 samdroid

如何设置元素的宽度等于设备宽度？

回答

相关问题