Question

我想使用相对单位制作HTML5网站。我想用什么？百分比？

我正在尝试执行以下操作，但我的标题不是正文的10％。至少它没有这样显示。下面的CSS是main.css中包含的内容。

body{
  background-color:red;
  width:100%;
  height:100%;
}
header{
  margin-right:auto;
  margin-left:auto;
  width:960px;
  background-color:#000000;
  height:10%;
}

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta content="UTF-8">
    <link rel="stylesheet" href="stylesheets/main.css">
  </head>
  <body>
    <header>
      testing
    </header>
  </body>
</html>

Answer 1

我认为您需要在'html'元素中应用'height：100％'才能使用页面元素的相对大小。

public void startScan() {
    ScanSettings scanSettings = new ScanSettings.Builder().setScanMode(ScanSettings.SCAN_MODE_LOW_LATENCY).build();
    ScanFilter scanFilters = new ScanFilter.Builder().setServiceUuid(new ParcelUuid(BLEManager.BLE_DEVICE_SERVICE_UUID), new ParcelUuid(BLE_SERVICE_FILTER_MASK)).build();
    mAdapter.getBluetoothLeScanner().startScan(Arrays.asList(scanFilters), scanSettings, mScanCallback);
}

Answer 2

试试这个css：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

我建议你使用这个重置css：

console.log(JSON.stringify(myObject, null, 3));

reset.css source I've found this gem online

Answer 3

正如其他人所说，您需要为所有容器的父级提供一个高度，以便您能够使用百分比高度： html, body { height: 100%}。从现在开始的任何百分比高度都是相对于具有设定高度的最近父母。

但我只是想补充一个替代单位是vh（视口高度），它是视点高度的百分比。因此，您可以将height : 10%;替换为height: 10vh;。这当然不是相对于父容器，因此它与%单位略有不同。

HTML5相对单位

3 个答案: